DOM增删改操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function create() {
var mu = document.getElementById('u');
var ele = document.createElement('li');
ele.innerHTML = '4';
//mu.appendChild(ele); //在末尾追加一个元素
//mu.insertBefore(ele,mu.firstChild.nextSibling); //在指定位置插入元素
//mu.replaceChild(ele,mu.firstChild.nextSibling); //指定位置替换元素
}
function copy() {
var mu = document.getElementById('u');
var ele = mu.firstChild.nextSibling.cloneNode(false);
ele.innerHTML = 'a';
mu.appendChild(ele);
}
function remove() {
var mu = document.getElementById('u');
var ele = mu.firstChild.nextSibling;
mu.removeChild(ele);
}
</script>
</head>
<body>
<ul id="u">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button value="1" onclick="create()">create</button><br />
<button value="2" onclick="copy()">copy</button><br />
<button value="3" onclick="remove()">remove</button>
<hr />
</body>
</html>
