HTML | DOM insertAdjacentHTML() 方法

DOM insertAdjacentHTML()方法用于将文本作为 HTML 文件插入到指定位置。此方法用于将文本更改或添加为 HTML。

句法 ：

node.insertAdjacentHTML(specify-position, text-to-enter)

返回值：这将返回具有指定更改的页面。

可以使用四个合法的位置值。

• 开始后
• 事后
• 开始前
• 之前

Positions	Effect
afterbegin :	This will add text when the selected element just begin.
afterend :	This will add text when the selected element just end.
beforebegin :	This will add text when the selected element about to begin.
beforeend :	This will add text when the selected element about to end.

示例 1：这是“afterbegin”位置的示例。

  

    
        HTML | DOM insertAdjacentHTML() Method
    
    
            h1,
        h2 {
            color: green;
            text-align: center;
        }
          
        div {
            width: 80%;
            height: 240px;
            border: 2px solid green;
            padding: 10px;
    

  

    
        Welcome to
        
          GeeksforGeeks.!
        
         
          HTML DOM insertAdjacentHTML() Method
        
    
    
    Click me.!
  
    
        function myFunction() {
            var h = document.getElementById("main");
            h.insertAdjacentHTML("afterbegin",
                "<span style='color:green; " +
                "background-color: lightgrey; " +
                "width: 50%;'>This is Example of</span>");
        }
    
  

  

输出 ：

点击按钮前：

点击按钮后：

示例 2：这是“afterend”位置的示例。

  

    
        HTML | DOM insertAdjacentHTML() Method
    
    
            h1,
        h2 {
            color: green;
            text-align: center;
        }
          
        div {
            width: 80%;
            height: 240px;
            border: 2px solid green;
            padding: 10px;
    

  

    
        Welcome to
        GeeksforGeeks.!
         This is Example of
    
    
    Click me.!
  
    
        function myFunction() {
            var h = document.getElementById("main");
            h.insertAdjacentHTML("afterend",
                "<span style='color:green; " +
                "background-color: lightgrey;" +
                "font-size: 25px; " +
                "padding-left: 30px;" +
                "padding-right: 30px;" +
                "width: 50%;'>" +
                "HTML DOM insertAdjacentHTML() Method" +
                "</span>");
        }
    
  

  

输出 ：

点击按钮前：

点击按钮后：

注意：同样， “beforebegin”和“beforeend”可用于在 HTML 中添加文本。

支持的浏览器： DOM insertAdjacentHTML() 方法支持的浏览器如下：

• 谷歌浏览器 1.0
• 浏览器 4.0
• 火狐 8.0
• 歌剧7.0
• Safari 4.0