任务要求
<html> <head><title>创建节点</title></head> <body> <input type="submit" value="add" onclick="add();"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>如上代码，再添加一个li标签，内容为444即：<li>444</li>
创建节点思路
- 使用document.createElement去创建一个标签节点。
- 然后为其添加一个父节点
- 再创建一个文本节点，即标签内的值
- 将值拉到子节点
实例代码
<html>
<head><title>创建节点</title></head>
<script>
function add(){
var li = document.createElement('li');//创建一个li标签节点
var text = document.createTextNode('444');//创建一个文本节点内容为444
document.getElementsByTagName('ul')[0].appendChild(li);//让li标签成为ul标签的儿子。注:添加子标签的时候是没有引号的。
li.appendChild(text);//把内容节点添加到li标签当中，即444添加到<li></li>中间
}
</script>
<body>
<input type="submit" value="add" onclick="add();">