动态往标签节点中添加文本

最新推荐文章于 2023-09-06 20:10:31 发布

learningcity

最新推荐文章于 2023-09-06 20:10:31 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/learningcity/article/details/38816989

版权

在学习过程中，动态修改HTML内容发现有两种方式：appendChild()与innerHTML；

首先创建了5个div标签加以测试

html内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点添加文本或对象</title>
<script src="js/divAppendChild.js"></script>
</head>

<body>
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
</body>
</html>

js内容

<pre name="code" class="javascript">window.onload = function() {
	addText1();
}
function addText1() {
	var test =["你好","hello wolrd",13];
	var testBr = new Array;
	for(var i=0,x=test.length;i<x;i++) {
		var newNode=document.getElementById("test"),
		    newNode1=document.getElementById("test1"),
		    newNode2=document.getElementById("test2"),
			newNode3=document.getElementById("test3"),
			newNode4=document.getElementById("test4");
		testBr[i]=test[i]+'\n';
		var textNode=document.createTextNode(test[i]),
		    brNode=document.createElement("br"),//创建换行符标签
		    textNode1=document.createTextNode(test[i]+'\n<br/>'),
			textNode3=document.createTextNode(test[i]+'\n'),
			textNode4=document.createTextNode(testBr[i]);//与testNode3效果等同
		console.dir(document);
		newNode1.appendChild(textNode1);//往id为test1的节点插入test数组，textNode文本节点无法使用换行符
		newNode3.appendChild(textNode3);//往id为test3的节点插入test数组，textNode文本节点使用换行符的转义字符'\n'
		newNode4.appendChild(textNode4);
		newNode.appendChild(textNode);//往id为test的节点插入test数组
		newNode.appendChild(brNode);//往id为test的节点添加的每个test数组元素后面插入换行标签
		newNode2.innerHTML+=test[i]+" ";//往id为test2的节点插入test数组，空格符隔开
	}
}

输出结果如图

其中id为test用appendChild方法插入文本后再用appendChild插入换行符，id为test2用innerHTML插入了文本以及空格符&nbsp，而id为test1，test3，test4的标签则有所疑问，首先TextNode中无法识别html的换行符<br/>所以test1输出未成功，转义换行符\n在html中无法识别，但为何以空格形式输出了，还望大神们解惑