Javascript 如何让DIV1在DIV2中插入新内容，并且仍然可以访问所有页面'；什么东西？

为了帮助学习PHP、AJAX和JQuery，我正在开发一个小的配方管理系统。在主页

recipesystem.php

上有两个div：

DIV1具有用于输入新配方名称和类别的输入字段，以及用于在后端PostgreSQL数据库表中创建新记录的按钮

该按钮还调用JQuery

.load（url，data）

，其中

url

变量指向一个PHP文件，该文件将额外的HTML输入字段和按钮加载到DIV2（用于在工作流的第二步中将配料等添加到新配方中）

我遇到的问题是，没有一个DIV2内容可以看到页面或DIV1上的对象

帮助我更好地理解了更改innerHTML和操作DOM之间的区别，但我仍然不确定如何将新的HTML内容添加到DIV2，同时保留其访问DIV1中的对象和原始页面的其余部分的能力

下面是来自DIV1的代码，它用新配方填充数据库，然后用调用

phpRecipeDetails.php

的HTML填充DIV2（

#divRightColumn

）：

  // Create the initial recipe namd and category
  $( "#createrecipebutton" ).click(function() {
    var varRecipeName = $('input:text[name=recipename]').val();
    var varRecipeCategory = $('input:text[name=recipecategory]').val();

    insertNewRecipe(varRecipeName,varRecipeCategory);

    var url = 'phpRecipeDetails.php';
    var data = 'recipename='+ varRecipeName;

    $('#divRightColumn').html('<h4>Loading...</h4>').load(url, data);
    return false;
  })

//创建初始配方namd和类别
$（“#创建RecipeButton”）。单击（函数（）{
var varRecipeName=$（'input:text[name=recipename]'）。val（）；
var varRecipeCategory=$（'input:text[name=recipecategory]'）。val（）；
insertNewRecipe（varRecipeName，varRecipeCategory）；
var url='phpRecipeDetails.php'；
变量数据='recipename='+变量recipename；
$（'#divRightColumn'）.html（'Loading…'）.load（url，数据）；
返回false；
})

php的内容变得相当复杂，因为它必须返回到

#divRightColumn

不仅要返回HTML结构，还要返回到该结构所利用的Javascript。当我尝试在DIV1或页面中使用这些Javascript函数时，DIV2内容会忽略它们。所以很明显我走错了路

如何开发DIV2，使其具有新内容，可以访问DIV1中的函数和对象以及原始页面

---

谢谢你的帮助

从

phpRecipeDetails.php

返回哪些内容？我们需要知道一切。谢谢你！我找到了一个更好的方法来完成我所追求的目标——不再通过PHP调用动态地用HTML加载我的DIV（随着一系列问题的升级），我现在在HTML中构建我所需要的所有DIV，但将它们的display属性设置为隐藏除我需要的DIV之外的所有DIV。与动态加载的单个DIV2不同的是，我更幸运地使用了许多单独的div，这些div都是随页面加载的。事实证明，这大大减少了麻烦，并且避免了我在DIV内容能够访问页面上其他对象时遇到的问题。