原生js动态创建文本内容的几种方式

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>

 

posted @ 2019-05-05 01:54  给时光以生命  阅读(10243)  评论(0)  编辑  收藏  举报