现在的位置: 首页 > 编程语言 > Java > Web开发 > 前端开发 > 正文

javascript给html添加结点操作

2015年03月05日 Java, 前端开发 ⁄ 共 2605字 ⁄ 字号 暂无评论

   

    html页面中的内容一般都是事先编写好的,用浏览器打开页面的时候,直接加载到页面上面的。如果想在一个页面上有一些交互性的操作,这时候javascript就派上用场了。那如果想在展现好的html页面上动态增加段落内容或修改段落内容,OK,段落对象的appendChild方法要派上用场了。


<html>
	<head>
		<title>Adding Nodes</title>
	</head>
	<body>
		<form action="#">
			<p><textarea id="contentArea" rows="5" cols="30"></textarea></p>
			<input type="button" value="Add some text to the page">
		</form>
	</body>
</html>

    如上代码,展现出来是

    如果想通过Add some text to the page 按钮给页面添加一些内容,那该如何操作呢?

    给Add some text to the page 按钮的单击事件绑定一个操作,让这个操作去给页面添加内容。


结点后添加
appendChild

获取要添加内容


    添加哪里的内容呢?姑且,我们就先添加按钮上方的输入框中的内容吧。

   
var inText =document.getElementById("contentArea").value;

    getElementById 方法获取到的是contentArea 这个id指向的对象,即页面上面的文本输入域。

将内容放在文本结点中


    拿到值之后该怎么办呢?需要创建一个文本节点,将内容接收。

    var newText =document.createTextNode(inText);

    拿到的文本节点后,还无法将其显示在页面上。

将文本结点放在段落中


    这时候还需要将它作为段落内容添加在页面的节点上。段落内容,那先创建一个段落吧。

    var newGraf =document.createElement("p");

    这行代码创建了一个空的段落行,里面还没有内容。


    段落对象中,有一个方法,叫做appendChild,是将文本节点信息绑定在段落上面的。

    newGraf.appendChild(newText);

将段落挂载在页面依附点上

    好了,内容绑定到段落上面了,但是段落似乎还是没有找到依附点啊。

    我们就先把段落挂在form表单后面吧。如果form表单有id属性的话(假设其id为form1),我们就可以通过

var docForm = document.getElementById("form1"); 来获取到form,但是form没有id属性;假如form有name属性的话,我们也可以通过getElementsByName拿到同名的form数组,然后获取到我们需要的form,不巧,name属性也没有。


    这时,从哪里作为突破口呢?

   
获取document中对象的常用方法有三个
,其中一个是通过tagName来获取的。tagName获取对象时既不需要id属性,也不需要name属性,而是直接通过标签名称来获取对象的。

    这里我们就通过form标签名来获取form对象。

    document.getElementsByTagName("form")这个可以了吗?噢,忘了,通过tagName获取到的结果集是集合,是该标签名对象的集合,我们要获取的form是第几个呢?

    第一个,那集合中就是第0个了,即document.getElementsByTagName("form")[0]。

    好了,那我们的代码就是var docForm = document.getElementsByTagName("form")[0];


    拿到段落要挂载的依附点后,需要将段落挂载在依附点上。

    这时,需要再次用appendChild方法了,即
docForm.appendChild(newGraf)


    整理后的完整代码为:

<html>
	<head>
		<title>Adding Nodes</title>
	</head>
	<body>
		<form action="#">
			<p><textarea id="contentArea" rows="5" cols="30"></textarea></p>
			<input type="button" value="Add some text to the page" onclick="addNodes()">
		</form>
		
		<script>
			function addNodes() {
				var inText = document.getElementById("contentArea").value;
				var newText = document.createTextNode(inText);

				var newGraf = document.createElement("p");
				newGraf.appendChild(newText);

				var docForm = document.getElementsByTagName("form")[0];							
                docForm.appendChild(newGraf);
			}
		</script>
	</body>
</html>

结点前添加insertBefore


    继续上面的代码,如果想把内容添加在form表单前面呢?

    变动比较小,将docForm.appendChild(newGraf);

    换为document.body.insertBefore(newGraf, docForm); 就可以了。

    document.body 指的是document对象的body子对象,即html页面上面的body标签域。


    insertBefore 方法与 appendChild 方法不同:appendChild方法传递一个参数,由依附点来调用,传递要挂载的段落;insertBefore 方法由document.body调用,传递两个参数,要挂在的段落内容 和 挂载的依附点名称,第一个参数为包含要添加内容的段落,第二个参数为依附点,即将第一个参数的段落插在第二个参数对象之前。


    总结一下给html页面添加结点内容信息的步骤:

    1 获取要添加的内容

    2 将内容放在文本节点中

    3 将文本节点放在段落中

    4 将段落挂在页面的依附点上