gpt4 book ai didi

javascript - 两种方法使用appendChild,但结果不同

转载 作者:行者123 更新时间:2023-12-01 01:30:14 24 4
gpt4 key购买 nike

救命啊!我使用两种方法在节点内添加子节点。但结果却不同!下面有两种代码。 enter image description here enter image description here enter image description here enter image description here

第一个代码:

<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ulid">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<br/>
<input type="button" value="添加" onclick="add1();"/>
</body>
<script type="text/javascript">
function add1(){
var li1 = document.createElement("li")
var text1 = document.createTextNode("下一个")
li1.appendChild(text1)
document.getElementById("ulid").appendChild(li1);
}
</script>
</html>

第二个代码:

<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ulid">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<br/>
<input type="button" value="添加" onclick="add1();"/>
</body>
<script type="text/javascript">
function add1(){
var li1 = document.createElement("li").appendChild(document.createTextNode("下一个"))
document.getElementById("ulid").appendChild(li1);
}
</script>
</html>

最佳答案

方法appendChild返回被附加的节点,在本例中它是文本节点。
然后,将文本节点附加到 ul,这会将其从 li 的子节点删除为 ul 的子节点。

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns

关于javascript - 两种方法使用appendChild,但结果不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53353730/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com