JavaScript将HTML代码添加到盒元素里

作者：andy0012019.12.25来源：Web前端之家浏览：8982评论:0

关键词：html js

在JavaScript中将HTML代码附加到div里的方法有两个：使用innerHTML属性或使用insertAdjacentHTML()方法。

1、使用innerHTML属性

要使用innerhtml属性追加HTML代码，首先选择要追加代码的元素（div）。然后，使用innerhtml上的+=运算符添加将字符串括起来的代码。

语法：

element.innerHTML += "HTML代码"

或者

element.innerHTML = element.innerHTML + "HTML代码"

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用JavaScript将HTML代码附加到div</title>
		<style> 
        body { 
            text-align: center; 
              
            padding: 5%; 
        } 
        div{
        	border: 2px dashed #D4AF37;
        }
        h1{ 
            color:red; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="add_to_me">
    	<h1>div标签内</h1>
        <p>这是已经输入到div中的文本</p> 
    </div><br />
  
    <button onclick="addCode()">添加内容</button> 
    <script> 
        function addCode() { 
            document.getElementById("add_to_me").innerHTML +=  
              "<h3>这是JS插入的文本</h3>"; 
        } 
    </script> 
</body> 
  
</html>

2、使用insertAdjacentHTML()方法

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

●　要插入代码的位置（在文档中）（'afterbegin'，'beforebegin'，'afterend'，'beforeend'）

●　要插入用引号括起来的HTML代码

语法：

elementInsideDiv.insertAdjacentHTML('afterend', '附加HTML代码');

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用JavaScript将HTML代码附加到div</title>
		<style> 
        body { 
            text-align: center; 
            padding: 5%; 
        } 
        div{
        	border: 2px dashed #D4AF37;
        }
        h1{ 
            color:red; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="add_to_me"> 
        <h1>div标签内</h1>
        <p id="add_after_me">这是已经添加到div中的文本</p> 
    </div><br>
  
    <button onclick="addCode()">添加内容</button> 
    <script> 
        function addCode() { 
            document.getElementById("add_after_me").insertAdjacentHTML("afterend", 
                "<h3>这是使用JS插入的文本</h3>"); 
        } 
    </script> 
</body> 
  
</html>

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

赏您的支持是我们创作的动力！