JavaScript插入元素（1）
DOM基础:
插入元素(1)（appendChild（）和insertBefore（））
appendChild（）把一个新元素插入到父元素的内部子元素的"尾部"。
代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入元素</title>
<script>
window.onload = function (){
let oBtn =document.getElementById("btn");
//为按钮添加点击事件
oBtn.onclick = function (){
let oUl = document.getElementById("list");
let oTxt = document.getElementById("txt");
//将文本框的内容转换为"文本节点"
let textNode = document.createTextNode(oTxt.value);
//动态创建一个一个li元素
let oLi = document.createElement("li");
//将文本节点插入li元素中去
oLi.appendChild(textNode);
//将li元素插入ul元素中去
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<ul id="list">
<li>苹果</li>
<li>葡萄</li>
<li>香蕉</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入">
</body>
</html>
运行结果:
输入桃子点击插入后:
桃子被添加到了"末尾"
