dom方法insertAfter的实现

在dom的原生api中,只用insertBefore,没有insertAfter,借助原有的api,可以模拟一个insterAfter。

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

先找父级元素,若目标元素为最后一个元素,直接append到父级末尾,

如果不是,则利用insertBefore插入到目标元素的下一个元素的前面

时间: 2024-10-21 22:49:25

dom方法insertAfter的实现的相关文章

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

Dom方法,解析XML文件

Dom方法,解析XML文件的基本操作 1 package com.demo.xml.jaxp; 2 3 import java.io.IOException; 4 5 import javax.xml.parsers.DocumentBuilder; 6 import javax.xml.parsers.DocumentBuilderFactory; 7 import javax.xml.parsers.ParserConfigurationException; 8 import javax.x

HTML DOM 方法

方法是我们可以在节点(HTML 元素)上执行的动作. 编程接口 可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElementById() 方法 getElementById() 方法返回带有指定 ID 的元素: 例子 <!DOCTYPE html> <html> <

innerHTML对比DOM方法,哪个性能好?有什么区别?

innerHTML对比DOM方法,哪个性能好?有什么区别?是个老生常谈的问题!跟浏览器版本与发展有关! innerHTML是w3c制定的行业标准,几乎所有浏览器都做了支持: 作为原生支持,innerHTML在各主流浏览器下的执行效率是很高的: 但是他有他的缺陷,特别是在ie低版本浏览器下,不支持html5.还有一些其他的标签属性. 直接测试的话,速度明显innerHTML比DOM方法要快很多(包括撸代码的速度),但是有说在webkit内核的浏览器中DOM方法比innerHTML要快. 平时采用j

DOM方法index()相关问题(为何$(this).index(this)是错误的 )

index() 方法返回指定元素相对于其他指定元素的 index 位置. 完全语法为:$(selector).index(element) ,其中element为可选参数. 1.若是省略element,则 获得第一个匹配元素相对于其同胞元素的 index 位置. 例如在如下代码中 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></sc

第一话:IE中用DOM方法绑定事件

工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值.下面进入主题: IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重的去思考和记录一下. 一.浏览器中不同的事件监听/绑定(个人感觉用监听比较通俗易懂): //IE element.attachEvent("event",functionname); //参数:1,表示监听的事件,需要在事件前加on(onclick,onfocus,onkeyevent……

before(),after(),prepend(),append()等新DOM方法简介

一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于DOM标准也是在不断升级进步,而且浏览器也在悄悄地进行跟进与支持. 然而,这种跟进与支持呢非常的低调与隐讳:加上行业的话语权大部分集中在JS工程师身上,同时DOM这种东西比较"低级"撑不起场面,因此各种什么技术大会啊,分享会议啊绝对不会讲这玩意儿的. 于是都叫他注意力很容易被带走,而没有意识

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)

<!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title>