JavaScript创造元素及节点操作

---

JavaScript创造元素及节点操作

---

1. 创造元素的三种方式
   1.document.write:

   document.write(exp1,exp2,exp3,....)
   

       如果有多个exp1，就会顺序写入

   2.innerHTML与innerText：

   var box = document.getElementById('box');
   box.innerHTML = '<p>新标签</p>';
   //box.innerText = '<p>新标签</p>';
   

       这两者直观的区别在于：
       innerHTML：在控件中加html代码 ,就是设置一个元素里面的HTML,标签对文本信息有效。
       innerText：打印标签之间的纯文本信息，显示标签，标签无效，低版本的火狐浏览器不支持。
   3.document.createElement()：

   var div = document.createElement('div');
   document.body.appendChild(div);
   

       createElement() 方法通过指定名称创建一个元素

2. 节点操作

   var body = document.body;
   var div = document.createElement('div');
   body.appendChild(div);//添加div节点
   
   var firstEle = body.children[0];
   body.insertBefore(div, firstEle);//在firstEle子节点前插入div节点
   
   body.removeChild(firstEle);//移除firstEle节点
   
   var text = document.createElement('p');//创建p节点
   body.replaceChild(text, div);//将div节点对象替换为text节点对象