原⽣js动态创建⽂本内容的⼏种⽅式
1.通过CreateTextNode⽂本节点
⾸先创建该元素（元素节点），然后向⼀个已存在的元素追加该⽂本节点
<!DOCTYPE html>
<html>
<body>
<div id="div1">
  <p id="p1">这是⼀个段落。</p>
  <p id="p2">这是另⼀个段落。</p>
</div>
<script>
var ateElement("p");
var ateTextNode("这是新段落。");
newEle.appendChild(newText);
var ElementById("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 ateElement("p");
newEle.innerHTML="new paragraph";  //innerText也可⽤
var ElementById("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//添加的第⼀个⽂本(多次覆盖内容)
12var ElementsByTagName("p");
13 newEle[0].innerHTML="new paragraph";  //输出结果:new paragraph
14
15//添加的第⼆个⽂本(可追加内容多次)
16var newText2 = ateTextNode(" hello world");
17 newEle[0].appendChild(newText2);
18
19//输出结果:new paragraph hello world
20
原生js和js的区别21 </script>
22
23 </body>
24 </html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。