2-10 替换
本节编程练习不计算学习进度,请电脑登录imooc.com操作

替换

replaceWith()

用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

.replaceWith()可以从DOM中移除内容,然后在这个地方插入新的内容。

通过调用replaceChild处理即可,但是这里需要注意的问题,就是事件的处理,因为节点的变更所以涉及到要移除这个节点的数据cleanData方法。

replaceWith: function() {
    var arg = arguments[0];
    this.domManip(arguments, function(elem) {
        arg = this.parentNode;
        jQuery.cleanData(getAll(this));
        if (arg) {
            arg.replaceChild(elem, this);
        }
    });
    return arg && (arg.length || arg.nodeType) ? this : this.remove();
}

.replaceWith()方法,和大部分其他jQuery方法一样,返回jQuery对象,所以可以和其他方法链接使用,但是需要注意的是:对于该方法而言,该对象指向已经从 DOM 中被移除的对象,而不是指向替换用的对象。

删除目标节点

jQuery( this ).remove();

然后再插入一个新节点

parent.insertBefore( elem, next );

将匹配元素集合从DOM中删除要涉及到empty,remove,detach方法。

任务

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title>DOM操作</title>
  7. </head>
  8. <body>
  9.  
  10. <button id="test1">模拟replaceWith处理</button>
  11.  
  12.  
  13. <div class="container">
  14. <div class="inner first">Hello</div>
  15. <div class="inner second">And</div>
  16. <div class="inner third">Goodbye</div>
  17. </div>
  18.  
  19.  
  20. <script type="text/javascript">
  21.  
  22. //$('div.second').replaceWith('<h2>New heading</h2>');
  23.  
  24. $('#test1').click(function() {
  25. var elem = document.querySelectorAll('div.second')[0]
  26. var div = document.createElement('div')
  27. div.innerHTML = 'replaceWith处理'
  28. elem.parentNode.replaceChild(div, elem)
  29. })
  30.  
  31.  
  32.  
  33. </script>
  34.  
  35. </body>
  36. </html>
下一节