DOM节点 增 插 删 改

增：

（并没有增加到页面上！！）

• document.createElement(); //创建元素节点 （标签）

<script type="text/javascript">
var div=document.createElement('div');  //添加一个div标签 
                  //创建后被JS攥在手里   并没有被扔到页面里面
</script>

我们来看一下，给它加内容“hello world”，控制台上可以显示标签的内部出现了这段内容，可是页面上没有显示任何内容


document.body.appendChild(div)
(将 div 扔在 body 中，div中添加的内容可以在页面中显示。)


• document.createTextNode(); //创建文本节点

<script type="text/javascript">
var text=document.createTextNode('hello world');
</script>

• document.createComment(); //创建注释节点
• document.createDocumentFragment();
  

  ---

插入：

• 标签.appendChild(); //插入到页面中
div.appendChild(span); //将span 插入到div 里面 遵循先后顺序(剪切插入)

<div></div>

<script type="text/javascript">
    var div=document.getElementsByTagName('div')[0]; //获取标签
    var text=document.createTextNode('hello');   //创建文本节点
    var span=document.createElement('span');   //创建元素节点

    div.appendChild(text);  //将text 文本添加到 div标签中
    div.appendChild(span);  //将span 元素添加到 div标签中  
                            //span标签在上一个创建的text文本下面

    var text1=document.createTextNode('world'); 
    span.appendChild(text1);
</script>

我们来看一个小例子：

<div></div>
<span></span>

<script type="text/javascript">
    var div=document.getElementsByTagName('div')[0];  //获取一个div 元素
    var span=document.getElementsByTagName('span')[0]; //获取一个span 元素

    span.appendChild(div);  //将div标签放在span标签内部
</script>

结果如图所示：（哈哈，我们貌似也不会把 div 标签放在 span 内！）
这个结果说明appendChild();插入是一种剪切操作

• parentNode.insertBefore(a,b);
  div.insertBefore(a,b); //相当于：div inser a before b。（在div 中插入a，a在b之前插入）

<div>
    <div></div>
    <li></li>
    <span></span>
</div>

<script type="text/javascript">
    var div=document.getElementsByTagName('div')[0];
    var span=document.getElementsByTagName('span')[0];

    var strong=document.createElement("strong");
    div.insertBefore(strong,span);  //在div 中插入strong标签，strong标签在span标签之前插入
</script>

---

删除：

• parent.removeChild(); //父节点删除它的子节点 页面将不再显示该标签（仅仅是剪切出来 以后还可以用）
  div.removeChild(i); //（删除 div 标签中的 i 标签）
• child.remove(); //真正的销毁 页面不再出现 以后也不再存在该标签
  i.remove();

替换：
parentNode.replaceChild(new,origin); //用新节点替换旧的节点（原来旧标签仅仅被剪切出来）

---

• 元素.innerHTML
(div.innerHTML 查找div中的 所有内容,包含文本或者元素 注释等)

  div.innerHTML=”123”; //将选取div 的所有内容替换为该内容（”123”）
  div.innerHTML+=”123”; //可以在div中追加内容，一般加在div标签的尾部

<div>
    <span>
        <b></b>
    </span> 
    <li></li>
</div>

<script type="text/javascript">
    var div=document.getElementsByTagName('div')[0];
    div.innerHTML+="<span style='background-color:red;color:white;font-size:20px;'>123</span>";
    //追加一个 span标签 里面指定好样式
    //注意此处style中要用''与外面的""区分开  不然会认错导致编译错误
</script>

• 标签.innerText(); //获取标签中的文本内容，基本用法和上面的innerHTML 一样（赋值就是整体内容的替换）
  （火狐不兼容 火狐中可以用 div.textContent）

• 标签.setAttribute('class','demo'); 给标签设置属性 (有某种属性替换，没有就是添加)
  标签.getAttribute(‘class’); //获取标签的属性值

我们来看一个例子吧，还有在控制台上的输入结果。

<span style='background-color:red;color:white;font-size:20px;'>123</span>   

<script type="text/javascript">
    var span=document.getElementsByTagName('span')[0];

</script>

在设置了style 属性后 页面中物体的背景也由原来的红色变为黑色了。