HTML DOM insertAdjacentHTML()用法及代码示例

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

用法:

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

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

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

afterbegin
afterend
beforebegin
beforeend

位置	影响
afterbegin :	当所选元素刚刚开始时，这将添加文本。
afterend :	当所选元素刚刚结束时，这将添加文本。
beforebegin :	当所选元素即将开始时，这将添加文本。
beforeend :	当所选元素即将结束时，这将添加文本。

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM insertAdjacentHTML() Method 
    </title> 
    <style> 
            h1, 
        h2 { 
            color:green; 
            text-align:center; 
        } 
          
        div { 
            width:80%; 
            height:240px; 
            border:2px solid green; 
            padding:10px; 
    </style> 
</head> 
  
<body> 
    <div> 
        <h2>Welcome to</h2> 
        <h1> 
          <u>GeeksforGeeks.!</u> 
        </h1> 
        <h2 id="main">  
          HTML DOM insertAdjacentHTML() Method 
        </h2> 
    </div> 
    <br> 
    <button onclick="myFunction()">Click me.!</button> 
  
    <script> 
        function myFunction() { 
            var h = document.getElementById("main"); 
            h.insertAdjacentHTML("afterbegin", 
                "<span style='color:green; " + 
                "background-color:lightgrey; " + 
                "width:50%;'>This is Example of</span>"); 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在单击按钮beforeend :

单击按钮后：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM insertAdjacentHTML() Method 
    </title> 
    <style> 
            h1, 
        h2 { 
            color:green; 
            text-align:center; 
        } 
          
        div { 
            width:80%; 
            height:240px; 
            border:2px solid green; 
            padding:10px; 
    </style> 
</head> 
  
<body> 
    <div> 
        <h2>Welcome to</h2> 
        <h1><u>GeeksforGeeks.!</u></h1> 
        <h2 id="main"> This is Example of</h2> 
    </div> 
    <br> 
    <button onclick="myFunction()">Click me.!</button> 
  
    <script> 
        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>"); 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在单击按钮beforeend :

单击按钮后：

注意：类似地，可以使用“beforebegin”和“beforeend”在HTML中添加文本。

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

Google Chrome 1.0
Internet Explorer 4.0
Firefox 8.0
Opera 7.0
Safari 4.0

相关用法

注：本文由纯净天空筛选整理自ShivamKD大神的英文原创作品 HTML | DOM insertAdjacentHTML() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。