使用原生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()帮他们找到适合自己的家。