在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代码。它打开您的网站跨站脚本漏洞。
