【jQuery学习笔记-----DOM替换元素】

替换元素

jQuery定义了replaceWidth()方法和replaceAll()方法来替换节点，与之对应的DOM定义了replaceChild()方法来实现相同的操作功能，不过们的用法迥然不同。

 

jQuery实现

<p>段落</p>

<p>段落</p>

<p>段落</p>

$(function(){

       $(“p”).replaceWidth(“<div>盒子</div>”); //替换所有p元素为div元素

})

 

如果使用replaceAll()方法替换上面示例中的代码，则可以这样进行修改

$(function(){

     $(“<div>盒子</div>”).replaceAll(“p”);

});

由引可见，replaceWidth()方法与replaceAll()方法的操作思路相反的。

   var p = document.getElementsByTagName(“p”);

   var div = document.createElement(“div”);

   div.innerHTML = “盒子”;

   for(var i=0,l=p.length;i<l;i++){

       var div1 = div.cloneNode(true);

       p[0].parentNode.replaceChild(div1,p[0]);//使用复制的div元素替换掉p集合中的第一个p元素

   }

 

使用javascript自定义replaceWidth()和replaceAll()方法

DOMExtend(“replaceWidth”,function(e){

     var _this = this;

          _this.parentNode.replaceChild(e,_this);

          return _this;

});

//严格意义上这个方法是不对的（不完全等价于jquery的相关方法）

DOMExtend(“replaceAll”,function(e){

     var _this = this;

          _this.parentNode.replaceChild(_this,e);

          return _this;

});

 

window.onload =function(){

     var p = document.getElementsByTagName(“p”);

     var div = document.createElement(“div”);

     div.innerHTML = “盒子”;

     for(var i=0,l=p.length;i<l;i++){

        var div1 = div.cloneNode(true); //复制div元素

         p[0].replaceWidth(div1)

     }

}