DOM方法添加标签

在一个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有点绕口,自行体会。

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





finished.


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值