Question

这可能是非常无趣的问题，但我对jQuery很新，因为我意识到我无法永远避免它。

我需要对我所遵循的一个例子做一个简单的解释，我理解最后的结果，但我想知道每个部分的作用。

function example1 (a) {
    var i = $('<div />').text(a).html();

    $('body').append('<li><strong>' + i + '</strong></li>')
}

因此，该示例创建了一个新元素并将其附加到正文中，因为您可能已经猜到了最终结果。

然而，这是我感到困惑的地方$('<div />').text(a).html() ...我知道$('<div />')创建一个新元素而不是选择现有的div ...但是当我将此函数应用于按钮时单击它只创建这部分<li><strong>' + i + '</strong></li> ...新div创建了什么？还有为什么选择.text(a).html()的例子，当我删除.text(a).html()中的一个或另一个时，这一切都搞砸了？

我希望这是有道理的，并提前感谢你:)。

Answer 1

您刚刚创建的div元素仍然存在（在函数内部） - 但它不是文档DOM的一部分（除非您使用append将其添加到DOM中）。 / p>

请注意，javascript的垃圾收集器可能会删除该DOM节点，因为在该函数之后将不会引用该DOM元素，因此不再需要它。

Answer 2

当函数返回时，您创建的DIV变得无法访问，因此GC可以回收它的垃圾。

使用.text(a).html()的目的是将a的文本转换为HTML实体，以防止跨站点脚本（XSS）攻击。 .text(a)设置DIV的文本，而不将a解释为HTML。然后访问.html()获取生成相同输出的结果HTML。例如。如果您致电example1('<div>')，则会设置i = '<div>'。

这个临时DIV并不是真的需要，因为你可以通过设置<strong>元素的文本来做同样的事情：

＆＃13;

function example2(a) {
  $('ul').append(
    $('<li>').append($('<strong>', {
      text: a
    }))
  );
}

example2("item 1");
example2("item <div> 2");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
</ul>

＆＃13;

jQuery创建一个新元素

2 个答案: