Question

我有以下代码：

$("#samplediv").html("<div>");  
$("#samplediv").append("<b>Test text</b>");
$("#samplediv").append("</div>");

我需要以下输出：

<div><b>Test text</b></div>

然而，输出是：

<div></div><b>Test text</b>

我做错了什么？我该如何防止这种行为？

谢谢！

Answer 1

jQuery不附加HTML的字符串，而是附加DOM 元素（通过解析输入HTML创建）。

因此，上述内容应该如此：

$("#samplediv").html("<div>"); // Create <div /> element
$("#samplediv").append("<b>Test text</b>"); // Append <b>...</b> _after_ <div />
$("#samplediv").append("</div>"); // Discard, invalid element.

以上回答了问题的“原因”部分。其他答案将指导您“如何”实现预期结果。

Answer 2

是浏览器在做，而不是jquery。大多数浏览器都会尽可能地修复错误的HTML。如果你只添加Div的一部分，它将通过添加其余部分来修复它。

这里有一些信息...... Dom查询在所有JS中都很昂贵，在jQuery中更是如此。在你的，你做三个。您可以通过执行以下代码将其减少为1：

var html = "<div>";
html+="<b>Test text</b>";
html+="</div>";
$("#samplediv").html(html);

如果您将html分开构建，然后进行追加，那么您将能够按照自己的意愿行事。这是处理DOM操作的推荐方法。这是更多的执行方式。

Answer 3

您假设.append只是将您的字符串添加到DOM，这是一个错误的假设。 .append正在使用浏览器JavaScript API（通常是innerHTML方法）来注入您的代码，并且（应该）添加任何丢失的结束标记并丢弃无效代码。

执行.append("<div>")时，它实际上会将<div></div>添加到DOM，这就是您获得该结果的原因。

要获得所需的结果，您要么使用连接字符串，要么创建一个可以使用的jQuery对象。

方法＃1：连接字符串

var html = "<div>";
html += "<b>Test text</b>";
html += "</div>";
$("#samplediv").html(html);

方法＃2：jQuery对象

var myDiv = $("<div></div>");
myDiv.append("<b>Test text</b>");
$("#samplediv").html(myDiv);

注意：使用字符串而不是jQuery对象要快得多，所以如果你不需要挂钩任何事件或需要灵活性，强烈建议使用第一种方法。

操作DOM既缓慢又麻烦，这就是为什么我没有提供一个部分追加的方法（如在你的例子中）。尝试最小化对DOM执行的操作量是一种很好的做法。

Answer 4

当你追加第一个字符串时，会附加格式正确的div，这意味着打开和关闭标记。

Answer 5

可能是您可以根据您的方法尝试。

$("#samplediv").html("<div></div>"); 
$("#samplediv div").append("<b>Test text</b>");

然而，还有许多其他方法可以追加div元素。

Answer 6

$("#samplediv").html('<div></div>');   
$("#samplediv div").append("<b>Test text</b>");

试试这个。

Answer 7

追加不是那样的。这将......

var myDiv = $('<div></div>');
myDiv.append("<b>Test text</b>");
$("#samplediv").append(myDiv);

Answer 8

我认为你所追求的是这样的事情：

$("#samplediv").html($("<div>").html("<b>Test text</b>"));

这个逻辑仍然将原始代码中的内容分开，但将它们全部放在同一个<div>内。

Jquery奇怪地将HTML附加到div中

8 个答案:

方法＃1：连接字符串

方法＃2：jQuery对象