JS代码与HTML的完全分离【图片库示例】

最新推荐文章于 2024-08-10 14:15:42 发布

原创

最新推荐文章于 2024-08-10 14:15:42 发布 · 718 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript dom编程艺术

该博客通过一个图片库示例，展示了如何使用DOM方法创建并操作HTML元素，从而实现JavaScript与HTML的完全分离。内容包括从HTML中移除图片和文字元素，然后编写函数动态创建img和p元素，设置其属性，并将它们插入到文档中，只保留一个id为'imagesGallery'的挂钩。

图片库的HTML里有一个图片部分和文字部分创建来完全是为showPic脚本服务的。既然这些元素这样只是为了DOM方法处理它们的，那么用DOM方法来创建他们最好不过。

1.将他们从HTML中删除。

2.编写函数完成任务

1.创建img元素节点；

2.设置节点id属性；

3.设置节点src属性；

4.设置节点alt属性；

5.创建p元素节点；

6.设置节点id属性；

7.创建文本节点；

8.把文本节点追加到p元素上；

9.把p元素和img插入到HTML文档；

function insertAfter(newElement,targetElement){
	var parent=targetElement.parentNode;
	if(parent.lastChild==targetElement){
		parent.appendChild(newElement);
		}
	else{
		parent.insertBefore(newElement,targetElement.nextSibling);
		}
	}
function preparePlaceHolder(){
	var placeholder=document.create