如何替换 jQuery 中的 HTML 元素？

我们可以使用 jQuery 替换 HTML 元素 .replaceWith()方法。使用 jQuery replaceWith()方法，我们可以用提供的新内容替换匹配元素集中的每个元素，并返回被删除的元素集。

.replaceWith()方法从 DOM 中删除内容并通过一次调用在其位置插入新内容。

句法 ：

replaceWith( newContent )

.replaceWith( function )

返回值：此方法返回具有更改的选定元素。

注意： jQuery .replaceWith()方法返回 jQuery 对象，以便其他方法可以链接到它上面。但是，必须注意的是，返回的是原始 jQuery 对象。这个对象指的是从 DOM 中删除的元素，而不是替换它的新元素。

示例 1：我们获取需要替换的元素并写入一个新元素来代替它。

HTML

    
        
        
        
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").replaceWith
                    ("<div style='width:200px;height:100px;\
                    background-color:red;text-align:center;\
                    vertical-align:middle;display:table-cell'>\
                    <strong>new div</strong></div>");
                });
            });
        
    
     
  
        
Example paragraph.
  
      
        click to replace 
      
    

                click to replace             

---

输出 ：

示例 2：我们还可以用另一个现有的 HTML 元素替换一个 HTML 元素。

XML

    
        
        
        
            $(document).ready(function(){
                $("button").click(function(){
                    $("p").replaceWith($("h1"))
                });
            });
        
    
     
  
        
Example paragraph.
  
      
        click to replace 
      
  
      H1 tag
    

输出 ：

示例 3：我们可以同时替换多个 HTML 元素。

HTML

    
        
        
        
            $(document).ready(function(){
                $("button").click(function(){
                    $(".X").replaceWith("<h3>new element</h3>")
                });
            });
        
    
     
  
      Example paragraph.
  
      Example H1
      
         Example div
      

                click to replace