JavaScript动态创建网页内容的几种方法

document.write()

这个方法只适合在页面加载期间向页面写入内容。如果页面加载后使用该方法，会覆盖网页所有内容。

    
我是div标签里的内容
    
我是p标签里的内容
    点击

    

执行结果：

Element.innerText()

这个方法只适合向页面写入纯文本内容，并且会覆盖该元素节点下的所有内容。

    点击

    
我是p标签里的内容
    
我是div标签里的内容
    

执行结果：

Element.innerHTML()

这个方法既可以向页面写入文本内容，也可以写入元素内容，并且会覆盖该元素节点下的所有内容。

// 修改上面的代码
document.querySelector('button').addEventListener('click', function() {
    document.querySelector('p').innerHTML = "我是p标签里的内容";
    document.querySelector('div').innerHTML = "我向div标签里添加了span标签";
});

执行结果：

document.createElement()

使用这个方法创建的元素，需要通过 appendChild()、insertBefore() 或 replaceChild() 方法添加到指定的文档树节点中，不会覆盖原有的元素。

    点击

    
我是p标签里的内容
    
我是div标签里的内容
    

执行结果：