<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>操作节点</title>
</head>
<body>
<div>
<ul>
<li>元素1</li>
<li>元素2</li>
</ul>
<input type="button" value="插入" onclick="insertNode();"/>
<input type="button" value="删除" onclick="deleteNode();"/>
</div>
<script>
/**
* 删除元素 父元素.removeChild(元素);
* */
function deleteNode(){
var ulElement = document.getElementsByTagName("ul")[0];
// ulElement.removeChild(ulElement.firstElementChild);
ulElement.removeChild(ulElement.firstChild);
}
/**
* 插入节点
* 父节点.insertBefore(新节点，子节点); 在指定父节点的子节点前插入一个新节点
*/
function insertNode(){
var ulElement = document.getElementsByTagName("ul")[0];
var liElement = document.createElement("li");
var textNode = document.createTextNode("新元素");
liElement.appendChild(textNode); //<li>新元素</li>
ulElement.insertBefore(liElement ,ulElement.firstElementChild);
}
function createNodeOne() {
var dElement = document.getElementsByTagName("div")[0];
var inputElement = document.createElement("input");
inputElement.id = "submit";
inputElement.type = "button";
inputElement.value = "提交";
var inputTextElement = document.createElement("input");
inputTextElement.type = "text";
inputTextElement.placeholder = "请输入用户名";
dElement.appendChild(inputTextElement);
dElement.appendChild(inputElement);
}
</script>
</body>
</html>
网友评论