DOM方法添加标签

最新推荐文章于 2024-08-17 10:24:46 发布

yin_991

最新推荐文章于 2024-08-17 10:24:46 发布

阅读量4k

点赞数

文章标签： javascript web前端标签 dom html

本文链接：https://blog.csdn.net/yin_991/article/details/77915843

版权

在一个html文档里面添加标签除了用html标签语言来添加之外，用javascript的DOM 方法也可以。以下是一个例子，比如我用到了h1标题标签，ul、li列表标签，img图片标签，p段落标签，来添加一个标题、图片列表、一个段落内容到文档里

1.html添加标签：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM方法添加标签</title>
</head>
	
<body>
	<h1>Images</h1>
	<ul>
		<li>
			<a href="images/唱片机.jpg">
				<img src="images/thumbnail/唱片机.jpg" alt="唱片机">
			</a>
		</li>
		<li>
			<a href="images/海滩背景.jpg">
				<img src="images/thumbnail/海滩背景.jpg" alt="海滩背景">
			</a>
		</li>
		<li>
			<a href="images/海边的美丽景色.jpg">
				<img src="images/thumbnail/海边的美丽景色.jpg" alt="海边的美丽景色">
			</a>
		</li>
		<li>
			<a href="images/笔记本.jpg">
				<img src="images/thumbnail/笔记本.jpg" alt="笔记本">
			</a>
		</li>
	</ul>
	<img src="images/钢琴上的相机.jpg" alt="钢琴上的相机">
	<p>Choose an image.</p>
</body>
</html>

效果是这样的：（哎呀，妈呀，怎么这么...丑？emmm，CSS还没露脸呢）

由于最近学的javascript有点杂，或者说有点懵逼，但还是在翻书本，边看书本边敲着代码，其中有一个DOM方法添加标签的内容还是有点意思，也就是动态添加标记，动态添加标记的好处是不需要在于原html文档里做任何增减，只需要在html文档里嵌入js文件，而动态添加的标记语句就在这个js文件里，当我们打开html文档时，动态添加的内容就会显示在浏览器里，而你会发现，原来的html是没任何变化的，这也是把结构与行为分离开来的一大好处，其实在原文档的基础上添加额外的数据的方法被叫做“渐进增强”，比如html结构层与css样式层的分离也是“渐进增强”的体现。回看之前敲过的一个图片列表的代码，就是上面的那个html文档，然后就想着用动态添加标记的方法尝试着来改一改，看看效果是不是一样，也当做对DOM学习的巩固，以下是DOM方法的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<script src="scripts/js7.js" type="text/javascript">
	</script>
</body>
</html>

其中，可以看到我在这个html文件里是没加任何标签的，也就是打开文件，在浏览器里是没任何东西的。我在body标签之间嵌入了js文件，然后，重要的js代码如下：

// JavaScript Document
function addElement(){
	//添加h1标签
	var h1=document.createElement("h1");
	//有了h1标签还不行，还要为里面添加文本信息
	var txt1=document.createTextNode("Images");
	//把txt1这个文本节点追加到h1标签里
	h1.appendChild(txt1);
	//但是到了这里，打开html文档还是不能显示添加的内容，这是因为还没有把h1标签追加到body标签里
	document.getElementsByTagName("body")[0].appendChild(h1);
	//也许会有一个疑问就是txt1为什么不用追加，这是因为txt1已经在h1里，把h1追加到body里的时候，实际已经把txt1一起加到里面。
	
	//下面继续添加标签，其实就是不断地用createElement()\createTextNode()\appendChild()等等这些DOM方法，对于那些嵌套的标签就用appendChild()方法来追加到里面
	
	//我整体的思路就是先把所有需要添加的元素创建出来，然后设置好元素对象的属性，因为标签之间有嵌套的，所以就用追加的方法追加到里面。
	
	//创建元素
	var ul1=document.createElement("ul");
	
	var li1=document.createElement("li");
	var li2=document.createElement("li");
	var li3=document.createElement("li");
	var li4=document.createElement("li");
	
	var a1=document.createElement("a");
	var a2=document.createElement("a");
	var a3=document.createElement("a");
	var a4=document.createElement("a");
	
	var img1=document.createElement("img");
	var img2=document.createElement("img");
	var img3=document.createElement("img");
	var img4=document.createElement("img");
	
	
	//设置属性
	a1.setAttribute("href","images/唱片机.jpg");
	a2.setAttribute("href","images/海滩背景.jpg");
	a3.setAttribute("href","images/海边的美丽景色.jpg");
	a4.setAttribute("href","images/笔记本.jpg");
	
	img1.setAttribute("src","images/thumbnail/唱片机.jpg");
	img1.setAttribute("alt","唱片机");
	img2.setAttribute("src","images/thumbnail/海滩背景.jpg");
	img2.setAttribute("alt","海滩背景");
	img3.setAttribute("src","images/thumbnail/海边的美丽景色.jpg");
	img3.setAttribute("alt","海边的美丽景色");
	img4.setAttribute("src","images/thumbnail/笔记本.jpg");
	img4.setAttribute("alt","笔记本");
	
	//追加元素
	a1.appendChild(img1);
	a2.appendChild(img2);
	a3.appendChild(img3);
	a4.appendChild(img4);
	
	li1.appendChild(a1);
	li2.appendChild(a2);
	li3.appendChild(a3);
	li4.appendChild(a4);
	
	
	ul1.appendChild(li1);
	ul1.appendChild(li2);
	ul1.appendChild(li3);
	ul1.appendChild(li4);
	
	//追加图片列表ul1到body标签，其实我开头已经把h1追加到body里，所以h1、ul1以及等下要添加的img、p标签都是兄弟元素
	document.getElementsByTagName("body")[0].appendChild(ul1);
	
	var img=document.createElement("img");
	img.setAttribute("id","imgexample");
	img.setAttribute("src","images/钢琴上的相机.jpg");
	img.setAttribute("alt","钢琴上的相机");
	
	var description=document.createElement("p");
	var desctext=document.createTextNode("Choose an image.");
	description.appendChild(desctext);
	
	
	ul1.setAttribute("id","imagegallery");
	var gallery=document.getElementById("imagegallery");
	
	
	//到了这里，虽然做了很多工作，只是完成了图片列表的添加，离完工还差两个标签，但我想换种方法来添加，就是用一个方法把新元素加到目标元素的后面，但是DOM并没有提供这样的方法，只是有一个insetBefore()这样的方法，但不妨碍我们去使用，只是需要点技巧。先在外面编写一个insertAfter含参函数，然后在这个函数里面调用
	
	insertAfter(img,gallery);
	insertAfter(description,img);

}
function insertAfter(newElement,targetElement){
	var parent=targetElement.parentNode;
	if(parent.lastChild==targetElement){
		parent.appendChild(newElement);
	}else{
		parent.innsertBefore(newElement,targetElement.nextSibling);
	}
}

//末了，不要忘记调用函数
addElement();

其中，后面的insertAfter()方法里面parent是指父元素，如果目标元素作为父元素的最后一个子元素，那么就简单地追加；如果目标元素不是最后一个，就要用insertBefore()方法插入， targetElement.nextSibling指的是目标元素的下一个兄弟元素，这也就是说，在目标元素的下一个兄弟元素之前插入新的元素，与在目标元素之后插入新的元素是同一个意思，emmmm有点绕口，自行体会。

最终在浏览器打开，效果与之前的一样：