如何使用 JavaScript 将 HTML 代码附加到 div ？

通过 JavaScript 将 HTML 代码附加到 div 有两种方法

• 使用 innerHTML 属性
• 使用 insertAdjacentHTML() 方法

使用 innerHTML 属性：
要使用 innerHTML 属性追加，首先选择要追加代码的元素 (div)。然后，使用innerHTML 上的+=运算符添加以字符串形式包含的代码。

句法：

element.innerHTML += "additional HTML code"

或者

element.innerHTML = element.innerHTML + "additional HTML code"

例子：

  

    How to Append HTML Code to a Div using Javascript
    
        body {
            text-align: center;
              
            padding: 5%;
        }
        h1{
            color:green;
        }
    

  

    
        GeeksforGeeks
        This is the text which has already been typed into the div
    
  
    Add Stuff
    
        function addCode() {
            document.getElementById("add_to_me").innerHTML += 
              "<h3>This is the text which has been inserted by JS</h3>";
        }
    

  

输出：
• 点击按钮之前：
  
• 点击按钮后：
  

  注意：这个方法基本上是破坏了div的所有内容，然后重新创建。因此，如果您将任何侦听器附加到该 div 的子节点，它们将丢失。

  使用 insertAdjacentHTML() 方法

  可以使用 insertAdjacentHTML() 方法将 HTML 代码附加到 div。但是，您需要在div 中选择一个元素来添加代码。这个方法有两个参数：

  1. 要插入代码的位置（在文档中）（'afterbegin'、'beforebegin'、'afterend'、'beforeend'）
  2. 要插入的 HTML 代码用引号括起来

  句法：

  elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');
  

  例子：

    
  
      How to Append HTML Code to a Div using Javascript
      
          body {
              text-align: center;
              padding: 5%;
          }
        h1{
          color: green
            }
      
  
    
  
      
          GeeksforGeeks
          
            This is the text which has already been typed into the div
      
    
      Add Stuff
      
          function addCode() {
              document.getElementById("add_after_me").insertAdjacentHTML("afterend",
                  "<h3>This is the text which has been inserted by JS</h3>");
          }
      
  
    

  输出：
  • 点击按钮之前：
    
  • 点击按钮后：
    

    注意：如果您将 HTML 代码作为用户的输入，则绝不应该以这种方式插入 HTML 代码。它将您的网站打开到跨站点脚本漏洞。

    JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照这个 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。