JavaScript动态创建网页内容的几种方法
document.write()
这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法，会覆盖网页所有内容。
<!-- 省略部分代码 -->
<body>
<div>我是div标签里的内容</div>
<p>我是p标签里的内容</p>
<button>点击</button></br>
<script>
document.write("我在页面加载期间通过write()方法写入");
document.querySelector(button).addEventListener(click, function() {
document.write("我通过点击按钮写入，并且覆盖了页面所有内容！");
})
</script>
</body>
执行结果：
Element.innerText()
这个方法只适合向页面写入纯文本内容，并且会覆盖该元素节点下的所有内容。
<body>
<button>点击</button></br>
<p>我是p标签里的内容</p>
<div>我是div标签里的内容</div>
<script>
document.querySelector(button).addEventListener(click, function() {
document.querySelector(p).innerText = "我是p标签里的内容";
document.querySelector(div).innerText = "<span>我向div标签里添加了span标签</span>";
});
</script>
</body>
执行结果：
Element.innerHTML()
这个方法既可以向页面写入文本内容，也可以写入元素内容，并且会覆盖该元素节点下的所有内容。
// 修改上面的代码
document.querySelector(button).addEventListener(click, function() {
document.querySelector(p).innerHTML = "我是p标签里的内容";
document.querySelector(div).innerHTML = "<span>我向div标签里添加了span标签</span>";
});
执行结果：
document.createElement()
使用这个方法创建的元素，需要通过 appendChild()、insertBefore() 或 replaceChild() 方法添加到指定的文档树节点中，不会覆盖原有的元素。
<body>
<button>点击</button></br>
<p>我是p标签里的内容</p>
<div>我是div标签里的内容</div>
<script>
document.querySelector(button).addEventListener(click, function() {
let span = document.createElement(span);
span.innerHTML = "我是创建的span节点，会被添加到div标签中。";
document.querySelector(div).appendChild(document.createElement(br));
document.querySelector(div).appendChild(span);
});
</script>
</body>
执行结果：
