50 DOM增删改

• document.createElement()
  • 创建一个元素节点对象
  • 他需要一个标签名作为参数，将会根据该标签名创建元素节点对象
  • 并将创建好的对象作为返回值返回
    var li = document.createElement("li");

• document.createTextNode()
  • 可以用来创建一个文本节点对象
  • 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
    var gzText = document.createTextNode("广州");

• appendChild()
  • 向一个父节点中添加一个新的子节点
  • 用法：父节点.appendChild(子节点);
    li.appendChild(gzText);

• 获取id为city的节点，将广州添加到city下
  var city = document.getElementById("city");
city.appendChild(li);

• insertBefore()
  • 可以在指定的子节点前插入新的子节点
  • 语法：
    父节点.insertBefore(新节点，旧节点);
city.insertBefore(li,bj);
  • 最好使用 bj.parentNode.insertBefore(li,bj);
  • 一定要使用其直接父节点，son1.parentNode.innerHTML 是tr
  • 而father.innerHTML 是tbody
  注意:一定要获取tbody才是tr的父元素！！

  <table id="father1">
  <tr id="son1">
  	<td>	<td>
  </tr>
  </table>

• replaceChild()
  • 可以使用指定的子节点替换已有的子节点
  • 语法：
    § 父节点.replaceChild(新节点，旧节点);

• removeChild()
  • 可以删除一个子节点
  • 语法：
    • § 父节点.removeChild(子节点);
city.removeChild(bj);
    • § 子节点.parentNode.removeChild(子节点); //常用
bj.parentNode.removeChild("bj"); //直接通过子元素获取父元素

• innerHTML
  • 读取一个元素的HTML代码
  • 设置#bj的HTML代码
    • bj.innerHTML = "昌平";
  • 用innerHTML方式为city添加广州节点
    • city.innerHTML+="<li>广州</li>";//方式不太好，因为会把city的代码进行重写

！！使用innerHTML也能完成增删改

• 一般我们会用两种方式结合使用
  • innerHTML和节点对象结合 //综合两种方法的优点，非常推荐

var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);