猿问

关于JS中appendChild的用法?

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

在wcschool的这段代码中，我想知道var para=document.createElement("p");和para.appendChild(node);这两句代码的意义，因为我发现我把这两句代码删除以后，将element.appendChild(para)改成element.appendChild(node)运行结果是一样的。

撒科打诨
浏览 868回答 3
3回答

鸿蒙传说

1234567891011121314151617//&nbsp;创建p节点var&nbsp;para=document.createElement("p");//&nbsp;创建文本节点var&nbsp;node=document.createTextNode("这是新段落。");//&nbsp;把文本节点添加到p节点里para.appendChild(node);&nbsp;//&nbsp;查找div1var&nbsp;element=document.getElementById("div1");//&nbsp;把p节点添加到div1里element.appendChild(para);//&nbsp;最终html结构//&nbsp;<div&nbsp;id="div1">//&nbsp;<p&nbsp;id="p1">这是一个段落。</p>//&nbsp;<p&nbsp;id="p2">这是另一个段落。</p>//&nbsp;<p>这是新段落。</p>//&nbsp;</div>1234567891011121314//&nbsp;你测试的代码//&nbsp;创建文本节点var&nbsp;node=document.createTextNode("这是新段落。");&nbsp;//&nbsp;查找div1var&nbsp;element=document.getElementById("div1");//&nbsp;把文本节点添加到div1里element.appendChild(node);//&nbsp;最终html结构//&nbsp;<div&nbsp;id="div1">//&nbsp;<p&nbsp;id="p1">这是一个段落。</p>//&nbsp;<p&nbsp;id="p2">这是另一个段落。</p>//&nbsp;这是新段落。//&nbsp;</div>
0

喵喵时光机

结果不一样，修改之前的结果是这样的：<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p><p>这是新段落。</p></div>改了之后是这样的：<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p>这是新段落。</div>虽然在页面上看起来是一样的。
0
随时随地看视频慕课网APP

相关分类

Vue.js
我要回答