Question

我很困惑追加功能的工作原理。在我尝试使用追加3次之后，它显示出与单个附加功能非常不同。

在javascript（附加1次）

Ipaddress

在javascript中（追加3次）

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

在html中

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

我发现附加1次方法运行良好，正如我预期的那样。另一个是非常莫名其妙的。请问有人可以解释一下这两种方法的区别吗？我试图在互联网上搜索，但我甚至不知道搜索的关键字。我的英语很差。很抱歉，如果这是一个含糊不清的问题。

提前谢谢。

Answer 1

是的...让我们看看每次追加元素时发生的事情。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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());

＆＃13;

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

＆＃13;

它返回

＃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，因此SerialPort无法转换为html元素，因此＃3中没有任何内容发生。

Answer 2

.appennd不是原生的javascript函数。它是一个jQuery方法。

append（）方法在所选元素的末尾插入指定的内容。

在你的代码中，附加3赢了，因为它不是一个完全封闭的HTML，而是3个兄弟dom元素。

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

2 个答案: