首頁猿問關于JS中appendChild的用法?

關于JS中appendChild的用法?

Vue.js

撒科打諢 2019-02-13 15:11:48

<!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);這兩句代碼的意義，因為我發(fā)現(xiàn)我把這兩句代碼刪除以后，將element.appendChild(para)改成element.appendChild(node)運行結果是一樣的。

查看完整描述

3 回答

鴻蒙傳說

TA貢獻1865條經(jīng)驗獲得超7個贊

1234567891011121314151617 // 創(chuàng)建p節(jié)點var para=document.createElement("p");// 創(chuàng)建文本節(jié)點var node=document.createTextNode("這是新段落。");// 把文本節(jié)點添加到p節(jié)點里para.appendChild(node); // 查找div1var element=document.getElementById("div1");// 把p節(jié)點添加到div1里element.appendChild(para);// 最終html結構// <div id="div1">// <p id="p1">這是一個段落。</p>// <p id="p2">這是另一個段落。</p>// <p>這是新段落。</p>// </div>

1234567891011121314 // 你測試的代碼// 創(chuàng)建文本節(jié)點var node=document.createTextNode("這是新段落。"); // 查找div1var element=document.getElementById("div1");// 把文本節(jié)點添加到div1里element.appendChild(node);// 最終html結構// <div id="div1">// <p id="p1">這是一個段落。</p>// <p id="p2">這是另一個段落。</p>// 這是新段落。// </div>

反對回復 2019-03-14

喵喵時光機

TA貢獻1846條經(jīng)驗獲得超7個贊

結果不一樣，修改之前的結果是這樣的：
<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>

雖然在頁面上看起來是一樣的。