javascript - 使用多个追加函数和单个追加函数有什么区别

Question

这个问题已经有答案了:

Prepend divs without closing them (1 个回答)

已关闭 7 年前。

我很困惑附加功能是如何工作的。当我尝试使用append 3次后，它显示出与单个append函数有很大不同。

在 javascript 中(追加 1 次)

var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox" />Test</div>');

在 javascript 中(附加 3 次)

var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;">');
divStep.append('<input type="checkbox" />Test');
divStep.apend('</div>');

在 html 中

<div id="stepTab">
</div>

我发现追加1次方法效果如我所料。另一种则非常令人费解。请有人能给我解释一下这两种方法的区别吗？我尝试在互联网上搜索，但我什至不知道搜索的关键字。我的英语很差。如果这是一个模棱两可的问题，很抱歉。

提前谢谢您。

Answer 1

是的...让我们看看每次向元素附加某些内容时会发生什么。

var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox" />Test</div>');
console.log(divStep.html());

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

返回<div style="width:400px;height:40px;float:left;clear:left;"><input type="checkbox">Test</div>

var divStep = $("#stepTab");
divStep.append('<div style="width:400px;height:40px;float:left;clear:left;">');
console.log(divStep.html());
divStep.append('<input type="checkbox" />Test');
console.log(divStep.html());
divStep.append('</div>');
console.log(divStep.html());

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

返回

#1 <div style="width:400px;height:40px;float:left;clear:left;"></div>

添加<div...left;"> 和</div>自动。

#2 <div style="width:400px;height:40px;float:left;clear:left;"></div><input type="checkbox">Test

#3 <div style="width:400px;height:40px;float:left;clear:left;"></div><input type="checkbox">Test

没有添加任何内容。

<小时/>

结论:我认为字符串会自动转变成完整的html元素/对象，而不是直接将html字符串附加到父节点的innerHTML中。因为</div>无法转换为 html 元素，因为它不是完全封闭的 HTML，因此 #3 附加中没有任何反应。