html的案列4——追加新的标签

添加新的标签结点对象的步骤：

（1）获得上级对象： 通过getElementById()获得已存在的标签对象，根据树形结构的存储特点从上往下获取结点对象。

（2）创建新的结点对象：createElement()（创建新的标签对象），createTextNode()（创建新的文本结点对象）。两个方法都是通过document对象直接调用。

（3）将新创建的结点对象放入树形结构的指定位置（从下往上，由相应的父对象进行添加），通过appendChild()将对象进行尾追加。（appendChild方法具有剪切粘贴的效果）

 （4）进行调试。

 

<html>
	<head><title>怪兽不纯粹的追加标签测试(只能重复添加新的的内容)</title></head>
<body>
	<table id = "tab" border = "1">
	<tr id = "tr1">
	<td id = "td11">春眠不觉晓</td>
	<td id = "td12" >处处闻啼鸟</td>
	</tr>
	<tr id = "tr2">
	<td id = "21">夜来风雨声</td>
	<td id = "22">花落知多少</td>
	</tr>
	</table>
	<input type = "button" name = "button1"  value = "添加" onclick = "add_verse();" />
	<script type = "text/javascript">
		function add_verse(){
			var tab1 = document.getElementById("tab");
			var new_tr =document.createElement("tr");
			var str1  = "我要加油啊！！";
			var str2 = "为了我的梦想啊！";
			var new_text1 = document.createTextNode(str1);
			var new_text2 = document.createTextNode(str2);
			var td1 = document.createElement("td");
			var td2 = document.createElement("td");
			td1.appendChild(new_text1);
			td2.appendChild(new_text2);
			new_tr.appendChild(td1);
			new_tr.appendChild(td2);
			tab1.appendChild(new_tr);
	}
</script>
</body>
</html>

 

posted @ 2018-11-30 11:23  怪兽不纯粹  阅读(424)  评论(0)    收藏  举报