javascript dom 基本操作小结

  自己平时可能也会经常遇到所以总结如下:

  1,dom元素的创建

  2,dom元素的插入

  3,dom元素替换

  4,dom元素的删除

  首先页面上有这么些简单的dom元素

  <div id="wrap">

  <div id="a">aaaaaaaa</div>

  <div id="b">bbbbbbbb</div>

  <div id="c">ccccccccc</div>

  </div>

  接下来我们创建一个div元素,js代码:

  var div_d = document.createElement('div');

  div_d.innerHTML = "dddddddd";

  div_d.id = "d";

  //这里不用innerText为了避免浏览器兼容引发一些问题;

  然后把创建的这个id为d 的div插到dom元素id为b的div的前面

  var div_wrap = document.getElementById('wrap');

  var div_b = document.getElementById('b');

  div_wrap.insertBefore(div_d,div_b);

  如果直接插到id为wrap的子元素后面则可以这样:

  div_wrap.insertBefore(div_d,null);

  如果是替换掉div_b则如下:

  div_wrap.replaceChild(div_d,div_b);

  最后我们删除指定的一个元素id为b的div

  div_b.parentNode.removeChild(div_b);

  或者

  document.body.removeChild(div_b);

  后续可能有很多衍生的方法及应用这里暂时不继续写下去了