jQuery 创建一个新元素

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将变得不可访问，因此它是可以被GC回收的垃圾。

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

这个临时 DIV 并不是真正需要的，因为您可以通过设置文本来执行相同的操作，如果 <strong>元素:

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

example2("item 1");
example2("item <div> 2");

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