如何使用 JavaScript 将 HTML 元素替换为另一个元素？

文档对象模型 (DOM) 是一种平台和语言中立的界面，程序和脚本使用它来动态访问内容、样式和结构。请参阅 DOM（文档对象模型）了解详细信息。我们可以通过使用 DOM 的createElement() 、 createTextNode() 、 appendChild() 、 replaceChild()方法和childNodes属性来实现这一点。

让我们讨论将一个 HTML 元素替换为另一个的这些方法和属性。

• createElement()：用于创建指定名称的元素节点。
  句法：

  var element = document.createElement("Element_name"); 
  

  在这个例子中，元素是“h1”标签，所以写

  var element=document.createElement("h1");

• createTextNode()：该方法用于创建文本节点。
  句法：

  var txt = document.createTextNode("Some_Text");

• appendChild()：创建文本节点后，我们必须使用appendChild()方法将其附加到元素。

  句法：

  element.appendChild(Node_To_append);

下面显示了有关如何使用上面讨论的这些方法和属性的工作代码。

HTML

  

    
        Using DOM'S to print Hello World 
    
      
    
        var h = document.createElement("h3");
  
        var txt = document
            .createTextNode("Hello World!!");
          
        h.appendChild(txt);
          
        document.body.appendChild(h);
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

childNodes[Position]：此属性返回子节点集合作为 NodeList 对象。节点按照它们在源代码中的出现进行排序，并且可以通过从 0 开始的索引号访问。

replaceChild()：用新节点替换子节点。

old_Node.replaceChild(new_Node, old_node.childNodes[node_position]);

示例：以下代码显示了如何将元素替换为另一个元素。

HTML

  

    
        Hello World 
  
        
        
            Click Me
        
    
  
    
      
    
        function repFun() {
  
            // Creating "h2" element
            var H = document.createElement("h2");
  
            // Retaining id  
            H.setAttribute("id", "red");
  
            // Creating Text node        
            var txt = document.createTextNode("Hello Geeks!!");
  
            // Accessing  the Element we want to replace 
            var repNode = document.getElementById("p1");
              
            // Appending Text Node in Element  
            H.appendChild(txt);
  
            // Replacing one element with another
            p1.replaceChild(H, p1.childNodes[0]);
        }
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：