使用原生JS来改变HTML文档的几种方法

有如下html页面：

现在需要使用原生的JS来对这个页面进行增添修改。

<div id="test">
<h2>hello</h2
</div>

方法1-使用 innerHTML：

function changeCode() {
var a=document.getElementById("test");
a.innerHTML="<h1>HI HOW A U?</h1>";
}
window.onload=function(){
changeCode();
};

这种方法最为简单粗暴，直接引入一段Html片段，但是会讲之前存在的片段覆盖掉，比如原本存在的Hello就被覆盖掉了。

方法2-三板斧：createElement() （创建节点）; createTextNode()（创建文本节点） ; appendChild()（插入节点） ;

逐一介绍：

首先先直接贴出完成代码：

function changeCode() {
var a=document.getElementById("test");
var h1 = document.createElement("h1");
var content = document.createTextNode("HI HAO R U?")
h1.appendChild(content);
a.appendChild(h1);
}
window.onload=function(){
changeCode();
};

（1）createElement()：所谓创建节点，通俗点讲就是创建一个标签。比如我想要创建一个标签

<h1>

,则如下：

var h1 = document.createElement("h1");

但这仅仅只是一个标签而已，里面没有任何内容：

<h1></h1>

如果要往h1里面增添内容，我们首先得要创建内容，于是用到了createTextNode()。

（2）createTextNode()：创建文本节点。比如我想创建一段文本节点如下：

var content = document.createTextNode("HI HOW R U?");

但是这只是一段文本片段，如果要让这段文本片段和上面创建的

<h1></h1>

联系起来，就需要用到appendChild()了。

（3）appendChild()：插入节点。我想把content里的内容插入到h1里面：

h1.appendChild(content);

于是现在就变成了

<h1>HI HOW A U?</h1>

。但是如果要把这段代码放到html页面上，我们还要再用一次这个方法：

var a=document.getElementById("test");
a.appendChild(h1);

大功告成，刷新你的页面看看效果吧。

下面是我觉得需要注意的地方：

前两板斧方法的前缀是document，因为他们是由“文档”创建出来的，有一种说法很有意思，这些节点一开始被创建出来时就相当于JS代码世界中的孤儿，居无定所，我们需要用appendChild()帮他们找到适合自己的家。