2018-07-29节点

<!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>

2018-07-29节点

推荐阅读更多精彩内容