编辑 Jquery Append 函数添加的 div 代码答案

【问题标题】：Editing div code added by Jquery Append function编辑 Jquery Append 函数添加的 div 代码
【发布时间】：2013-03-01 14:43:02
【问题描述】：

我已成功地将一个 html 文件附加到我的网站，其中仅包含菜单和标题图像。我希望我网站上的每个网页都具有相同的菜单、标题和结构。一切正常，但我不知道如何编辑我使用附加函数 (jquery) 添加的 div。

例如：假设我附加了一个名为“include.html”的文件，并且该文件包含一个名为“website”的 div。有什么方法可以在添加后将代码/内容添加到该 DIV 中？

我需要访问由 APPEND 函数附加的 DIVS，以便为每个页面添加唯一的文本/信息..

这里有一些代码：

示例页面：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>loadContent(); 
    $(document).on('mouseenter', "#menulist", function() {
          mainmenu();
});
</script>
</body>
</html>

这里是 menu2.js 代码：

function mainmenu() {
     $(" #menulist li").hover(function() {
         $(this).find('ul:first').css({
              visibility: "visible",
              display: "none"}).show(300);
         },function() {
              $(this).find('ul:first').css({visibility: "hidden"});
     });
}

$(document).ready(function() {
     mainmenu();
});

这里是 menu_load.js 代码：

function loadContent() {
     $("body").append($("<div id='index'>").load("include.html"));
}

我尝试这样做的原因是我想在包含网站的主 DIV 上添加唯一信息。如果有更好的方法（不附加 JQUERY），我很想知道..

提前致谢！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

使用html() 或text() .. 将内容附加到div 中，id 为website.. 在include.html 附加到加载回调函数之后

回调函数：如果提供了“完成”回调，则在后处理和 HTML 插入完成后执行。回调会为 jQuery 集合中的每个元素触发一次，并依次设置给每个 DOM 元素。

试试这个

function loadContent()
{
  $("body").append($("<div id='index'>").load("include.html", function() {
       $("#website").text("HELLO"); // OR $("website").html("HELLO");
  });
}

【讨论】：

同样的问题，页面现在变成空白。可能是什么原因？
$("#website").text("HELLO"); 你是否在回调函数中尝试过这个应该可以工作..试试..让我知道是否有任何问题....
好的，这意味着您在 javascript 代码中有一些错误....请检查您的萤火虫控制台...是否有错误..让我知道错误是什么....好的
ok.. 如果您使用的是 firefox... 下载此插件getfirebug.com.... 对开发人员的 javascript 调试很有帮助... 您可以浏览网站中的文档... .
好的.. 完成了。执行命令时似乎进入无限循环： loadContent(); （当然是函数调用）

【解决方案2】：

是的。找到 id（或其他查找该 div 的 jquery 方法），然后在加载时调用一个函数：

function loadContent() {
  $("body").append($("<div id='index'></div>").load("include.html", {}, function() {
    $("#div_id").html(new_content);
  });
}

如果您有任何问题，请告诉我。

【讨论】：

试过了，现在页面变成空白了..可能是什么原因？

【解决方案3】：

您可以将回调函数传递给 jQuery 中的 load(...) 调用。所以，你可以这样做：

$("body").append($("<div id='index'>").load("include.html", function () {
    $(this).append("<div>your html content</div>");
}));

这会将文本 your html content 插入到 div 的末尾。显然，如果你想把它放在其他地方，你可以使用 append 以外的东西。

【讨论】：