The insertBefore insertAfter javascript

2010-06-29  来源:本站原创  分类:Web  人气:135 

These days need to use on the HTML node element of the deletion / insertion operation, due to use insertBefore method, encountered some trouble, now as a knowledge of the order, respectively, appendChild, insertBefore, and sum up the insertAfter

appendChild defined

appendChild (newChild: Node): Node
Appends a node to the childNodes array for the node.
Supported: IE 5.0 +, Mozilla 1.0 +, Netscape 6.0 +, Safari 1.0 +, Opera 7.0 +

Add a node to child nodes of the specified array, and reads like a little mouthful, it simply is to add elements to the specified node

appendChild Usage

target.appendChild (newChild)

newChild as the target child nodes into the final after a child node

appendChild example

var newElement = document.Document.createElement ('label');
newElement.Element.setAttribute ('value', 'Username:');
var usernameText = document.Document.getElementById ('username');
usernameText.appendChild (newElement);

insertBefore defined

The insertBefore () method inserts a new child node before an existing child node.

insertBefore () method is used: the existing child node inserted before a new child node

insertBefore Usage

target.insertBefore (newChild, existingChild)

newChild as target of the child node before the node inserted into the existingChild

existingChild is optional parameter, when the null effect when the same with appendChild

insertBefore example

var oTest = document.getElementById ("test");
var newNode = document.createElement ("p");
newNode.innerHTML = "This is a test";

oTest.insertBefore (newNode, oTest.childNodes [0]);

Well, then there should also have insertAfter insertBefore of it?

Good that we come to write one example with Aptana, but Aptana smart tips to tell I do not have insertAfter this method

Then define a Luo own:)

insertAfter defined

function insertAfter (newEl, targetEl)
var parentEl = targetEl.parentNode;

if (parentEl.lastChild == targetEl)
parentEl.appendChild (newEl);
) Else
parentEl.insertBefore (newEl, targetEl.nextSibling);

insertAfter usage and examples

var txtName = document.getElementById ("txtName");
var htmlSpan = document.createElement ("span");
htmlSpan.innerHTML = "This is a test";
insertAfter (htmlSpan, txtName);

Will htmlSpan as txtName brother node into the node after txtName


1, appendChild insertBefore is done on the node and the method to use, but insertAfter only a function of the custom

2, insertBefore compared with appendChild, the more flexible you can insert the new node to the target node child nodes of any location in the array.

3, and the use of appendChild insertBefore to insert a new node the premise that his brother must have a common parent node, node

Reprinted please reference [ ]

  • The insertBefore insertAfter javascript 2010-06-29

    These days need to use on the HTML node element of the deletion / insertion operation, due to use insertBefore method, encountered some trouble, now as a knowledge of the order, respectively, appendChild, insertBefore, and sum up the insertAfter appe

  • Introduction to the basis of Ext 2010-08-06

    To learn and apply good Ext framework, must need to understand the Html DOM, Ext Element and Component is the difference between. Each page has an HTML DOM tree structured model, all the contents of the browser has a corresponding DOM object, dynamic

  • 遍历jquery对象的代码分享 2014-05-21

    今天遇到一个问题需要获取tagName,使用jquery,查询了一下,大家说用$("dd").attr("tagName")能获取到,但是得到的返回值是undefined,于是又查询饿了许久,返回遍历了一下jquery封装的对象 $("dd").bind("click",function(e){ var $obj = $(; var i=0; for (var x in $obj){ i++; var $hr

  • Read the XI Ext (via innerHTML to create elements) 2011-01-09

    innerHTML that the IE has become the de facto standard into the property, all browsers support. Although there is no html4 admit it, but html5 has officially be included . We know that libraries have missed any DOM operation, since operation with JS

  • JavaScript之appendChild.insertBefore和insertAfter使用说明 2014-12-13

    这几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild.insertBefore和insertAfter做个总结 appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape

  • Js the appendChild () insertBefore () and extended insertAfter () 2010-11-21

    JavaScript the appendChild, insertBefore and insertAfter: Using the prototype to extend the HTML node element of the insertAfter () (Note: ie does n

  • jQuery中append.insertBefore.after与insertAfter方法注意事项 2014-03-25

    jQuery中append.appendTo.prepend.prependTo.before.insertBefore.after与insertAfter方法注意事项 这里列的是针对初学jQuery者来说容易搞不懂的部分,我在这里把这些方法列了个清单,希望大家能看的懂.如下: 方法 源包装集/字串 目标包装集体 特性描述 A.append(B) B A 若目标包装集只匹配一个元素,则源(也包括同源包装集匹配的所有元素)将被移动到目标位置:若目标包装集包含多个元素,则源将保留在原来的位置,但同时

  • Javascript insertAfter() 实现函数代码 2014-07-15

    DOM没有提供insertAfter()方法,我们可以自己扩展下. //DOM没有提供insertAfter()方法 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { // 如果最后的节点是目标元素,则直接添加.因为默认是最后 parent.appendChild(newElement);

  • 2009-12-25 Chuan Chi Podcast - JavaScript: JQuery (Reprinted) 2010-04-10

    Used AJAX technology know that the famous 2.JQuery Introduction JQuery later, following an excellent Prototype JavaScript library. JQuery idea: write less, do more. JQuery advantages: lightweight, powerful selector, excellent package DOM operation, r

  • Table column drag javascript implementation 2010-04-15

    <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"> <HTML> <HEAD> <TITLE> New Document </ TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author&q

  • JavaScript in the BOM and DOM 2010-06-05

    BOM BOM defines the JavaScript browser can operate the various features of the interface, providing access to document the various functional components (such as the window itself, the screen features, browsing history, etc.) of the channels and meth

  • Reprinted online article on the javascript function compatible with the common browser stuff. 2010-07-20

    <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" " "> <Html xmlns = " "> <head> <meta http-equi

  • ten most commonly used javascript custom function 2010-08-26

    < type="text/javascript"> If you do not use the library or the library does not own the reserves are always good for some commonly used functions . (10)addEvent The most popular is the online version of Scott Andrew's , Javascript is said

  • javascript DOM programming arts reading notes 2010-09-06

    javascript DOM programming arts reading notes The first part of the directory Chapter 1 Origin of JavaScript 1.1 JavaScript 1.2 A Brief History of the browser war 1.3 standard 1.4 Summary Chapter 2, JavaScript 2.2 Grammar 2.1 Grammar 2.3 statement pr

  • Jquery list of common methods (collection)-JavaScript programming 2010-09-30

    Attribute: $ ("P"). AddClass (css style defined type); to add an element of style $ ("Img"). Attr ((src: "test.jpg", alt: "test Image")); to add an element, attribute / value parameter is the map $ ("Img")

  • Dynamically created Javascript to submit FORM 2010-10-15

    <script language="javascript" type="text/javascript"> <!-- //function that creates the form, adds some elements //and then submits it function select(id) { var t = document.getElementById("t" + id); var d = document.

  • javascript dom action 2010-10-22

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTEN

  • 读JavaScript DOM编程艺术笔记 2013-10-23

    读JavaScript DOM编程艺术笔记,需要的朋友可以参考下. 1.获得当前元素的下一个元素 function getNextElement(node){ if(node.nodeType==1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }; 2.外部引入的js,添加页面加载方法 复制代码 代码如下: function addLoadEvent(

  • javascript十个最常用的自定义函数(中文版) 2014-02-08

    如果不使用类库或者没有自己的类库,储备一些常用函数总是有好处的. (10)addEvent 网上最流行的版本是Scott Andrew的,据说javascript界曾举行一场比赛(此事件我们可以在Pro Javascript Techniques第100页看到)或浏览PPK的网站,征求添加事件与移除事件的函数,他就是其获奖者.下面就是他的实现: function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) {

  • javascript拓展DOM操作 prependChild insertAfert 2014-05-15

    Javascript dom操作中有appendChild 和insertBefore 却没有prependChild 和insertAfter 以下是自己写的一个拓展函数,虽然网上已经有了,仅当做自己练兵... function prependChild(o,s){ if(s.hasChildNodes()){ s.insertBefore(o,s.firstChild); }else{ s.appendChild(o); } } function insertAfert(o,s){ if(s