JavaScript 如何替换HTML元素

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

让我们来讨论一下这些方法和属性，以实现将一个HTML元素替换为另一个。

createElement()： 用于创建具有指定名称的元素节点。
语法：

var element = document.createElement("元素名称");

在此示例中，元素名称是”h1″标签，所以写成：

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

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

var txt = document.createTextNode("一些文本");

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

语法：

element.appendChild(要附加的节点);

下面是如何使用上述所讨论的方法和属性的示例代码。

<!DOCTYPE html> 
<html> 
  
<body> 
    <h2> 
        Using DOM'S to print Hello World  
    </h2> 
      
    <script> 
        var h = document.createElement("h3"); 
  
        var txt = document 
            .createTextNode("Hello World!!"); 
          
        h.appendChild(txt); 
          
        document.body.appendChild(h); 
    </script> 
</body> 
  
</html>

输出：

点击按钮之前：

JavaScript 如何替换HTML元素

点击按钮之后：

JavaScript 如何替换HTML元素

childNodes[Position]： 该属性返回一个NodeList对象，包含作为子节点的一组节点。这些节点按照它们在源代码中的出现顺序排序，并且可以通过索引号（从0开始）访问。

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

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

示例： 以下代码展示了如何用另一个元素替换元素。

<!DOCTYPE html> 
<html> 
  
<body> 
    <div id="p1"> 
        <p id="red">Hello World </p> 
  
        <!-- We are going to replace Hello World!!  
            in "p" tag with "Hello Geeks" in "h2"  
            tag-->
        <button onclick="repFun()"> 
            Click Me 
        </button> 
    </div> 
  
    <p id="demo"></p> 
      
    <script> 
        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]); 
        } 
    </script> 
</body> 
  
</html>