- appendChild方法
添加子节点到末尾
特点:可以实现类似于剪切黏切的效果
<style type="text/css">
#div1{
width:200px;
height:150px;
border:2px solid red;
}
#div2{
width:200px;
height:150px;
border:5px dashed green;
}
</style>
</head>
<body>
<div id="div1" >
<ul id="ul1">
<li>111</li>
<li>111</li>
</ul>
</div>
<div id="div2" >
</div>
<input type="button" value="add" onclick="add();"/>
<script type="text/javascript">
function add(){
var li3=document.getElementById("div2");
var li3=document.getElementById("ul1");
div2.appendChild(ul1);
}
</script>
</body>
- insertBefore(newNode,oldNode)方法
在某个节点之前插入一个新的节点
两个参数
要插入的节点,在谁之前插入
插入一个节点,节点不存在,需要创建。
<body>
<ul id="ul1">
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">5</li>
<li id="li4">6</li>
</ul>
<input type="button" value="add" onclick="add();"/>
<script type="text/javascript">
function add(){
/*
1.获取到li3的标签
2.创建li
3.创建文本
4.把文本添加到li下面
5.获取到ul
6.把li添加到ul下面
*/
var li3=document.getElementById("li3");
var li5=document.createElement("li5");
var text5=document.createTextNode("555");
li5.appendChild(text5);
var ul1=document.getElementById("ul1");
ul1.insertBefore(li5,li3);
}
</script>
</body>