DOM方法添加标签

来源：互联网发布：三一重工知乎编辑：程序博客网时间：2024/06/06 16:29

在一个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 Documentfunction 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.

阅读全文

0 0