<html>
<head>
<meta charset="UTF-8">
<title>insertAdjacentHTML</title>
</head>
<body>
<div id="paral" style="background:lavender;min-height:100px;border:3px solid black;">
<div style="color:lightseagreen;background:white;">原本的内容</div>
</div>
<button id='bb'>beforeBegin</button>
<button id='ab'>afterBegin</button>
<button id='ae'>afterEnd</button>
<button id='be'>beforeEnd</button>
<script>
var paral = document.getElementById("paral"),
a = document.getElementById("bb"),
b = document.getElementById("ab"),
c = document.getElementById("ae"),
d = document.getElementById("be"),
an = 1,
bn = 1,
cn = 1,
dn = 1;
a.addEventListener('click', function() {
paral.insertAdjacentHTML("beforeBegin", '<div style="background: lawngreen;height:20px;">' + an + '</div>');
an++;
});
b.addEventListener('click', function() {
paral.insertAdjacentHTML("afterBegin", '<div style="background: lightblue;height:20px;">' + bn + '</div>');
bn++;
});
c.addEventListener('click', function() {
paral.insertAdjacentHTML("afterEnd", '<div style="background: lemonchiffon;height:20px;">' + cn + '</div>');
cn++;
});
d.addEventListener('click', function() {
paral.insertAdjacentHTML("beforeEnd", '<div style="background: lightcoral;height:20px;">' + dn + '</div>');
dn++;
});
</script>
</body>
</html>
