如何在 JavaScript 中使用 DOM 元素获取/更改 HTML？

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

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

  例子：

    
  
      
          How to get/change the HTML with
          DOM element in JavaScript?
      
  
    
  
      
          Accessing HTML of a DOM 
          element in JavaScript.
      
    
      
          JavaScript is used for web programming. 
      
    
      
          Get and change the html for DOM element
      
    
      
          function getHtml() {
              var Element = document.getElementById("iD1");
              alert(Element.innerHTML);
              Element.style.color = "orange";
              Element.innerHTML = "GeeksforGeeks";
          }
      
  
    

  输出：

  • 单击按钮之前：
    
  • 单击按钮后：
    
• 使用 getElementByName() 方法：该方法通过使用它的类名来获取/识别 DOM 元素并返回元素。

  例子：

    
  
      
          How to get/change the HTML with
          DOM element in JavaScript?
      
  
    
  
    
      
          Accessing HTML of a DOM 
          element in JavaScript.
      
    
      
          JavaScript is used for web programming.
      
    
      
          Get and change the html
          for DOM element
      
    
      
          function getHtml() {
              var Element = 
                  document.getElementsByClassName("p1");
    
              alert(Element[0].innerHTML);
              Element[0].style.color = "blue";
              Element[0].innerHTML = "GeeksforGeeks";
          }
      
  
    

  输出：

  • 点击按钮前：
    
  • 点击按钮后：
    
• 使用 getElementsByTagName()：此方法使用标签名称获取/识别 DOM 元素并返回它。

  例子：

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

  输出：

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

注意：上述三种方法使用 DOM 元素的 inner.HTML 属性来获取 HTML 并提醒它，然后更改元素中存在的 HTML 内容。属性inner.HTML 主要用于更改文本或内容，而outer.HTML 用于更改标签和文本内容，因为它返回HTML 内容及其标签。

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

  

    
        How to get/change the HTML with
        DOM element in JavaScript?
    

  

  
     GeeksforGeeks 
  
    
        Get HTML for DOM element
    
      
    
        function getHtml() {
            var Element = document.getElementsByTagName("div");
            alert(Element[0].outerHTML);
            Element[0].style.color = "red";
            Element[0].outerHTML = "<h1> JavaScript. </h1>"
        }
    

  

输出：

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

函数 getElementById()、getElementsByClassName() 也可用于获取用于访问 outerHTML 的 DOM 元素，其方式与用于访问 innerHTML 的方式相同。因此，我们可以使用上述方法访问 DOM 的 HTML。