这个问题可能很幼稚,但我对 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()
中的一个或另一个时一切都乱了?
我希望这是有道理的,并提前感谢您:)
最佳答案
当函数返回时,您创建的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>
关于jQuery 创建一个新元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45723799/