DOM的基本操作1

DOM树结构：

举个例子：
html:

<div></div>

js:

    var div = document.getElementsByTagName('div')[0];
    var span = document.createElement('span');//增
    var text = document.createTextNode('123');//增
    var comment = document.createComment('this is comment');//增
    div.appendChild(span);//插
    div.appendChild(text);//插
    div.appendChild(comment);//插

PARENTNODE.insertBefore(a,b)
将元素a插入到元素b前面

举个例子：
html：

   <div>
            <span></span>
            <p></p>
            <strong></strong>
        </div>

js:

var div = document.getElementsByTagName('div')[0]

现在我们要把em标签插入到p标签前面

所以就要在JS中进行修改
js:

 var div = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    var em = document.createElement('em');//增
    div.insertBefore(em,p);

现在我们要把strong标签删掉。

在js:

 var div = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    var em = document.createElement('em');
    div.insertBefore(em,p);
    var strong = document.getElementsByTagName('strong')[0];
    div.removeChild(strong);//删

例如先我们要用一个新的标签hr代替div中的便签p