JavaScript 如何获取/更改DOM元素的HTML

为了在JavaScript中获取/访问DOM元素的HTML，第一步是根据其id、名称或标签名来识别元素。然后，我们可以使用inner.HTML或outer.HTML来获取HTML。

使用getElementById()方法： 此方法通过其ID获取/识别DOM元素并返回该元素。

示例： 在这个示例中，我们将使用javascript的getElementById()方法来更改javascript中的HTML DOM元素。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How to get/change the HTML with
        DOM element in JavaScript? 
    </title> 
</head> 
  
<body> 
    <h3> 
        Accessing HTML of a DOM  
        element in JavaScript. 
    </h3> 
  
    <p id="iD1"> 
        JavaScript is used for web programming.  
    </p> 
  
    <button onclick=getHtml()> 
        Get and change the html for DOM element 
    </button> 
  
    <script> 
        function getHtml() { 
            var Element = document.getElementById("iD1"); 
            alert(Element.innerHTML); 
            Element.style.color = "orange"; 
            Element.innerHTML = "GeeksforGeeks"; 
        } 
    </script> 
</body> 
</html>

输出:

JavaScript 如何获取/更改DOM元素的HTML

使用 getElementByName()****方法: 该方法通过使用类名获取/识别DOM元素，并返回该元素。

示例: 在此示例中，我们将使用javascript的getElementsByName()方法来更改javascript中的HTML DOM元素。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How to get/change the HTML with
        DOM element in JavaScript? 
    </title> 
</head> 
  
<body> 
    <h3> 
        Accessing HTML of a DOM  
        element in JavaScript. 
    </h3> 
  
    <p class="p1"> 
        JavaScript is used for web programming. 
    </p> 
  
    <button onclick=getHtml()> 
        Get and change the html 
        for DOM element 
    </button> 
  
    <script> 
        function getHtml() { 
            var Element =  
                document.getElementsByClassName("p1"); 
  
            alert(Element[0].innerHTML); 
            Element[0].style.color = "blue"; 
            Element[0].innerHTML = "GeeksforGeeks"; 
        } 
    </script> 
</body> 
</html>

输出:

JavaScript 如何获取/更改DOM元素的HTML

使用getElementsByTagName()方法： 该方法通过元素标签名称获取/识别DOM元素并返回。

示例： 在本示例中，我们将使用javascript的getElementsByTagName()方法来更改HTML DOM元素。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How to get/change the HTML with
        DOM element in JavaScript? 
    </title> 
</head> 
  
<body> 
    <h3>  
        Accessing HTML of a DOM  
        element in JavaScript. 
    </h3> 
  
<p>JavaScript is used for web programming.</p> 
      
<p>JavaScript was invented in 1990s.</p> 
  
    <button onclick=getHtml()> 
        Get and change the html for DOM element 
    </button> 
  
    <script> 
        function getHtml() { 
            var Element = document.getElementsByTagName("p"); 
            for (var i = 0; i < Element.length; i++) { 
                alert(Element[i].innerHTML); 
                Element[i].innerHTML = "GeeksforGeeks."; 
            } 
        } 
    </script> 
</body> 
</html>

输出：

JavaScript 如何获取/更改DOM元素的HTML

注意: 上述三种方法使用 DOM 元素的 inner.HTML 属性获取 HTML 并警告它，然后更改元素中的 HTML 内容。inner.HTML 属性主要用于更改文本或内容，而 outer.HTML 用于更改标签和文本内容，因为它返回带有标签的 HTML 内容。

下面的示例说明了使用 getElementsByTagName() 方法使用 outer.HTML 属性。

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        How to get/change the HTML with
        DOM element in JavaScript? 
    </title> 
</head> 
  
<body> 
    <div> GeeksforGeeks </div> 
  
    <button onclick=getHtml()> 
        Get HTML for DOM element 
    </button> 
      
    <script> 
        function getHtml() { 
            var Element = document.getElementsByTagName("div"); 
            alert(Element[0].outerHTML); 
            Element[0].style.color = "red"; 
            Element[0].outerHTML = "<h1> JavaScript. </h1>"
        } 
    </script> 
</body> 
</html>

输出：

JavaScript 如何获取/更改DOM元素的HTML