<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> appendChild细节 </title>
</head>
<body>
<!-- appendChild：
给父元素添加一个子元素
添加到最后，如果是已经存在的元素，那么相当于是移动到最后，只要是存在的元素，再被appendChild就绝对是移动到最后 -->
<input type="button" value="创建新的li,添加到ul" id="btn1">
<input type="button" value="已经存在的li,添加到ul" id="btn2">
<input type="button" value="已经存在的li,添加到另外一个ul" id="btn3">
<input type="button" value="创建新的li,添加到两个ul" id="btn4">
<ul id="ul1">
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li id="li3">隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
</ul>
<ul id="ul2">
<li>隔壁老周</li>
<li>隔壁老周</li>
<li>隔壁老周</li>
<li>隔壁老周</li>
<li>隔壁老周</li>
</ul>
<script>
// 找到元素
var ul1 = document.getElementById('ul1');
var ul2 = document.getElementById('ul2');
var li3 = document.getElementById('li3');
// 创建新的li,添加到ul ;添加点击事件;
document.getElementById('btn1').onclick = function() {
//创建新的 li ;
//方式 1 :
var li = document.createElement('li'); // document.creatElement 创建出一个元素
li.innerHTML = "新的li"; // 创建出一个元素
ul1.appendChild(li); // <li>新的li</li>
//方式 2 :
ul1.innerHTML += "<li> 又是一个新的li</li>";
}
// 已经存在的li,添加到ul; 添加点击事件;
document.getElementById('btn2').onclick = function() {
ul1.appendChild(li3); // 将已经存在的li,添加到ul 相当于是移动到最后，只要是存在的元素，再被appendChild就绝对是移动到最后
}
// 已经存在的li,添加到另外一个ul; 添加点击事件;
document.getElementById('btn3').onclick = function() {
ul2.appendChild(li3); // 将已存在的元素先取出,再添加到另外一个元素中;
}
// 创建新的li,添加到两个ul; 添加点击事件;
document.getElementById('btn4').onclick = function(){
var li = document.createElement('li');
li.innerHTML = "新的li";
ul1.appendChild(li); // 先添加到 ul1 后又被取出 添加到 ul2 中;
ul2.appendChild(li); // 最后只会在 ul2 中添加新的 li;
}
</script>
</body>
</html>
网友评论