DOM相关操作

最新推荐文章于 2024-01-14 21:05:35 发布

Maojm

最新推荐文章于 2024-01-14 21:05:35 发布

阅读量715

点赞数

分类专栏： JavaScript技术

本文链接：https://blog.csdn.net/maojm/article/details/3768497

版权

JavaScript技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、createChild

 
 var oNewP = document.createElement("p");
 var oText = document.createTextNode("Hello Universe!");
 oNewP.appendChild(oText);
 document.body.appendChild(oNewP);
 

2、 removeChild

 
  //方法一 
var oP = document.body.getElementsByTagName("p")[0];
oP.parentNode.removeChild(oP);
//方法二 
var oP = document.body.getElementsByTagName("p")[0];
document.body.removeChild(oP);
 
 

3、replaceChild

 
    var oNewP = document.createElement("p");
var oText = document.createTextNode("Hello Universe!");
oNewP.appendChild(oText);
var oOldP = document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP, oOldP);    
 
   

4、DocumentFragment

 
     var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];                
var oFragment = document.createDocumentFragment();//进行缓存  
                
for (var i=0; i < arrText.length; i++) {
       var oP = document.createElement("p");
       var oText = document.createTextNode(arrText[i]);
       oP.appendChild(oText);
       oFragment.appendChild(oP);
   }
                
document.body.appendChild(oFragment);
 
    