00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
insertBefore()
【格式】父节点.insertBefore(插入的节点, 旧节点)
功能：将插入的节点插入到旧节点之前
*/
window.onload = function(){
//创建一个<strong> 将这个节点插入到span节点之前
var oSpan = document.getElementById("span1")
var oDiv = document.getElementById("div1")
var node = document.createElement("strong")
var text = document.createTextNode("文本文档")
node.appendChild(text)
oDiv.insertBefore(node, oSpan)
}
</script>
</head>
<body>
<div id="div1">
<p>p</p>
<span id="span1">span</span>
<em>em</em>
</div>
</body>
</html>
01 教学
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="C:\Users\Administrator\Desktop\网页编程\tool.js"></script>
<script>
/*
insertBefore()
【格式】父节点.insertBefore(插入的节点, 旧节点)
功能：将要插入的节点插入到旧节点之前
*/
window.onload = function(){
//创建一个<strong> 将这个节点插入到span节点之前
//<1>创建strong
var node = createElementWithText("strong", "strong文本")
var oSpan = document.getElementsByTagName("span")[0]
//<2>进行插入
oSpan.parentNode.insertBefore(node, oSpan)
inserAfter(node, oSpan)
}
/*
Dom里inserAfter()这个方法是没有的
*/
function inserAfter(newNode, oldNode){
//判断oldNode是否是最后一个节点
var parent = oldNode.parentNode
if(oldNode == parent.lastChild){
//最后一个节点，直接插入到子节点的末尾
parent.appenChild(newNode)
}else{
//插入到oldNode的下一个节点之前
parent.insertBefore(newNode, oldNode.nextSibling)
}
}
</script>
</head>
<body>
<div id="div1">
<p>p</p>
<span>span</span>
<em>em</em>
</div>
</body>
</html>
