原生js動態創建文本內容的幾種方式

本文轉載自查看原文 2019-05-05 01:54 4257 【003】JavaScipt

1.通過CreateTextNode文本節點

首先創建該元素（元素節點），然后向一個已存在的元素追加該文本節點

<!DOCTYPE html>
<html>
<body>

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

<script>
var newEle=document.createElement("p");
var newText=document.createTextNode("這是新段落。");
newEle.appendChild(newText);

var element=document.getElementById("div1");
element.appendChild(newEle);　　//追加的元素在div容器內 </script>

</body>
</html>

2.通過innerHTML屬性

<!DOCTYPE html>
<html>
<body>

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

<script>
    var newEle=document.createElement("p");
    newEle.innerHTML="new paragraph";  //innerText也可用

    var element=document.getElementById("div1");
    element.appendChild(newEle);   //追加的元素在div容器內

</script> </body> </html>

3.通過替換某元素的文本內容:innerHTML與CreateTextNode結合實現追加文本內容

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6     <p id="p1">這是一個段落。</p>
 7     <p id="p2">這是另一個段落。</p>
 8 </div>
 9 
10 <script>
11 //添加的第一個文本(多次覆蓋內容)
12 var newEle=document.getElementsByTagName("p");
13 newEle[0].innerHTML="new paragraph";  //輸出結果:new paragraph 14 
15 //添加的第二個文本(可追加內容多次)
16 var newText2 = document.createTextNode(" hello world");
17 newEle[0].appendChild(newText2);
18 
19 //輸出結果:new paragraph hello world
20 
21 </script>
22 
23 </body>
24 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生js動態創建、獲取、刪除屬性的幾種方式 js中幾種動態創建元素並設置文本內容的比較，及性能測試。 Linux創建文件的幾種方式 linux創建文件的幾種方式 HTML創建文本框的3種方式 shell之創建文件及內容原生JS實現復制圖片和文本內容 selenium向富文本框填寫內容的幾種方式 JS動態設置css的幾種方式 JS獲取當前網頁內容，創建文件並下載，URL.createObjectURL和URL.revokeObjectURL