javascript给html添加结点操作

向右看齐 2022-08-07 02:48 184阅读 0赞

>      
>

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

如上代码，展现出来是

> ![SouthEast][]

如果想通过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中对象的常用方法有三个][_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" οnclick="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 将段落挂在页面的依附点上

[SouthEast]: /images/20220805/d4bc3146713e4aa5ba595a04b852b5c2.png
[_document]: http://blog.csdn.net/magi1201/article/details/43974171