<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>04dynamicInsert.html</title>
<script>
window.onload = function () {
document.getElementById("butbb").onclick = bb;
document.getElementById("butab").onclick = ab;
document.getElementById("butbe").onclick = be;
document.getElementById("butae").onclick = ae;
}
//1 <h1 id="h">2 hiiii 3 </hi> 4
//1:BeforeBegin
//2:AfterBegin
//3:BeforeEnd
//4:AfterEnd
function bb() {
document.getElementById("h").insertAdjacentHTML("BeforeBegin", "add BeforeBegin aaaa");
}
function ab() {
document.getElementById("h").insertAdjacentHTML("AfterBegin", "add AfterBegin aaaa");
}
function be() {
document.getElementById("h").insertAdjacentHTML("BeforeEnd", "add BeforeEnd zzzzz");
}
function ae() {
document.getElementById("h").insertAdjacentHTML("AfterEnd", "add AfterEnd zzzzz");
}
</script>
</head>
<body>
<h1 id="h" style="background-color:yellow">this is heading 1</h1>
<input type="button" id="butbb" value="BeforeBegin" />
<input type="button" id="butab" value="AfterBegin" />
<input type="button" id="butbe" value="BeforeEnd" />
<input type="button" id="butae" value="AfterEnd" />
</body>
</html>
留言列表