js的动态插入指定位置的标签方法insertBefore，以及自定义insertAfter方法

最新推荐文章于 2025-06-29 23:21:47 发布

开发路上的AZhe

最新推荐文章于 2025-06-29 23:21:47 发布

阅读量4.9k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种在HTML中动态插入新元素的方法，具体为在指定元素后插入一个包含图片的div标签。通过创建新的div和img元素，设置样式类和图片源，然后使用自定义的insertAfter函数将其插入到目标元素之后。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            var mydiv = document.getElementById("mydiv");//目标元素
			
			var divimg = document.createElement("div");  //新建一个div标签
			divimg.classList.add("productInformation-img");  //给div定义一个类名    这里用来控制样式的

			var img = document.createElement("img");    //新建一个img标签
			img.setAttribute("src", "teaimg/1.jpg"); //给img标签一个src属性
			img.classList.add("teawidth");  //给img标签定义一个类名   用来控制样式

			divimg.appendChild(img);   //然后将img放在div标签的下面

			//var classdiv = document.getElementById("classDiv");   这个是divimg的父标签  使用insertBefore的时候要用到  这里我没用
			//classdiv.insertBefore(divimg, mydiv);//insertBefore 动态的将节点插入目标元素之前
          
		   /*
		     因为动态插入标签的需要在目标元素的后面，而DOM又没有提供insertAfter()方法,所以需要自定义一个
		   */
		   insertAfter(divimg, mydiv);

            //动态的将节点插入目标元素之后
			function insertAfter(newElement, targetElement) {
				var parent = targetElement.parentNode;//得到父节点
				if (parent.lastChild == targetElement) {
					// 如果最后的节点是目标元素，则直接添加。因为默认是最后
					parent.appendChild(newElement);
				} else {
					parent.insertBefore(newElement, targetElement.nextSibling);
					//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
				}
			}

参考文档：https://www.cnblogs.com/nifengs/p/4936884.html