创建节点学习

任务要求

<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();">