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>