JS案例六_1:添加城市
使用的相关知识点:对子节点的添加:document.appendClild()
文本节点的创建:document.createTextNode()
元素节点的创建:document.createElement()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
document.getElementById("btn").onclick = function() {
//1.获取ul节点
var ulEle = document.getElementById("ulEle");
//2、创建文本节点
var textNode = document.createTextNode("高松");
//3、创建li节点<li></li>
var liEle = document.createElement("li");
//4、将文本节点添加到li节点中
liEle.appendChild(textNode);
//5、将李li节点添加至ul节点中
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="添加" id="btn" />
<ul id="ulEle">
<li>上海</li><li>新西兰</li><li>东京</li><li>莫斯科</li>
</ul>
</body>
</html>