关于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// 创建p节点var para=document.createElement("p");// 创建文本节点var node=document.createTextNode("这是新段落。");// 把文本节点添加到p节点里para.appendChild(node); // 查找div1var element=document.getElementById("div1");// 把p节点添加到div1里element.appendChild(para);// 最终html结构// <div id="div1">// <p id="p1">这是一个段落。</p>// <p id="p2">这是另一个段落。</p>// <p>这是新段落。</p>// </div>1234567891011121314// 你测试的代码// 创建文本节点var node=document.createTextNode("这是新段落。"); // 查找div1var element=document.getElementById("div1");// 把文本节点添加到div1里element.appendChild(node);// 最终html结构// <div id="div1">// <p id="p1">这是一个段落。</p>// <p id="p2">这是另一个段落。</p>// 这是新段落。// </div> -
喵喵时光机
结果不一样，修改之前的结果是这样的：<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>虽然在页面上看起来是一样的。
随时随地看视频慕课网APP
相关分类
Vue.js