`

Js之appendChild() insertBefore() 和扩展的 insertAfter()

阅读更多
JavaScript之appendChild、insertBefore和insertAfter:
http://www.cnblogs.com/samlin/archive/2009/03/28/JavaScript-appendChild-insertBefore-insertAfter.html


使用prototype来扩展HTML节点元素的insertAfter()(注:ie下不适用,会报 HTMLElement(或Node)未定义):
http://snippets.dzone.com/posts/show/5179
// 一 扩展HTMLElement的prototype
HTMLElement.prototype.insertAfter = function(newNode, refNode) {
        if(refNode.nextSibling) {
            return this.insertBefore(newNode, refNode.nextSibling);
        } else {
            return this.appendChild(newNode);
        }
    }

// 二 扩展Node的prototype
Node.prototype.insertAfter = function(newNode, refNode) {
	if(refNode.nextSibling) {
		return this.insertBefore(newNode, refNode.nextSibling);
	} else {
		return this.appendChild(newNode);
	}
}
分享到:
评论

相关推荐

    JavaScript之appendChild、insertBefore和insertAfter使用说明

    几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结

    js中AppendChild与insertBefore的用法详细解析.docx

    JavaScript 中的 AppendChild 和 InsertBefore 用法详细解析 在 JavaScript 中,appendChild 和 insertBefore 是两个常用的方法,用于在 DOM 中插入新的节点。但是,很多开发者对这两个方法的使用和区别不是很清楚...

    js中AppendChild与insertBefore的用法详细解析

    首先,让我们深入探讨JavaScript中非常重要的DOM操作方法:appendChild和insertBefore。 appendChild方法用于将一个节点添加到指定节点的子节点列表的末尾。它的使用非常直接,接受一个参数newChild,代表即将添加...

    JavaScript缺少insertAfter解决方案

    总结来说,虽然DOM标准没有提供`insertAfter()`方法,但我们可以通过组合现有的方法,例如`insertBefore()`和`appendChild()`,以及通过编程判断目标元素位置,来实现这一功能。这样的方法不仅能够满足开发中的特定...

    C#操作XML时,对xmlNode增、删、改操作

    AppendChild()方法将新节点添加到指定节点的子节点列表的末尾,而InsertAfter()和InsertBefore()方法可以将新节点插入到指定节点的子节点列表中的特定位置。 增加节点属性 可以使用SetAttribute()方法将属性添加到...

    Javascript insertAfter() 实现函数代码

    在使用jQuery时,我们可以直接调用`insertAfter()`方法来进行元素的插入操作,但理解原生JavaScript实现的方法原理对于我们理解DOM操作以及调试和维护代码都是非常有帮助的。 此外,在使用上述函数时,还应注意以下...

    使用insertAfter()方法在现有元素后添加一个新元素

    在JavaScript中,DOM操作是构建动态网页的关键技术之一。`insertAfter()`方法是一个非常实用的函数,用于在已有的DOM元素之后插入新的元素。虽然JavaScript的原生DOM API并未提供这个方法,但我们可以自定义一个函数...

    javascript insertAfter()定义与用法示例

    不过需要强调的是,虽然在JavaScript中没有内置的insertAfter()方法,但是通过现有的DOM操作API,如appendChild()和insertBefore()等,我们可以实现类似的功能。这些知识点不仅对于理解文档中的示例代码至关重要,也...

    javascript DOM笔记 1

    然后,你可以使用`appendChild`、`insertBefore`或`insertAfter`方法将这个新元素添加到DOM树中。`appendChild`会将指定的节点添加到当前节点的末尾,而`insertBefore`则允许你在特定的现有子节点之前插入新节点。`...

    JavaScript节点.pdf

    在这个讨论中,我们将深入理解JavaScript中的DOM操作,特别是`insertAfter()`函数,这是一个非标准但非常实用的方法,用于在已存在元素之后插入新的元素。 `insertAfter()`函数,如文件描述所示,是JavaScript标准...

    javascript拓展DOM操作 prependChild insertAfert

    需要注意的是,如果在文档中已经存在节点,那么调用这些方法(`appendChild()`、`insertBefore()`、自定义的`prependChild()`和`insertAfter()`)将会从当前位置将该节点移动到新位置。所以,这些方法不仅仅添加节点...

    jquery和javascript的区别(常用方法比较)

    至于插入新元素,`JavaScript` 的 `insertBefore()` 方法需要指定目标元素作为参数,而 `jQuery` 提供了 `after()`, `insertAfter()`, `before()`, `insertBefore()` 四个方法,操作起来更为直观。 除了以上提到的...

    JavaScript利用HTML DOM进行文档操作的方法_.docx

    DOM 提供了一个平台和语言中立的接口,使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。 - **核心 DOM**:提供了一个用于任何结构化文档的标准模型。 - **XML DOM**:提供了用于 XML 文档的标准模型,...

    jQuery Select 上移下移

    当然,如果你需要在不使用jQuery的情况下实现这个功能,可以使用原生JavaScript的DOM操作方法,如`appendChild()`、`removeChild()`和`insertBefore()`等。 总结,通过理解HTML的`<select>`和`<option>`元素,结合...

    JS实现添加,替换,删除节点元素的方法

    本文将深入探讨如何使用JavaScript来添加、替换和删除节点元素,从而达到动态修改网页内容的目的。 首先,要理解DOM树的概念。DOM将HTML文档建模为树结构,其中每个HTML元素都是树中的一个节点。JavaScript提供了...

    juqery 学习之五 文档处理 插入

    5. **insertAfter(target)**: 类似于`insertBefore()`, `insertAfter()`方法将每个匹配的元素插入到另一个指定元素之后。这可以帮助在现有元素后创建新的内容。 这些jQuery方法极大地简化了DOM操作,使开发者能够...

    原生js实现给指定元素的后面追加内容

    综上所述,原生JavaScript并没有提供一个直接的方法来实现给指定元素的后面追加内容,但通过结合使用父节点的appendChild方法和insertBefore方法,我们可以自定义一个函数来实现这一功能。这个自定义函数insertAfter...

    table--表格的各种操作--增,删,移动,插入到指定位置

    通过DOM操作,如`createElement()`、`appendChild()`或`insertBefore()`,可以在表格的末尾或指定位置插入新行。 - 在数据库环境中,如SQL,可以使用`INSERT INTO`语句向表中添加新的记录。 2. **删除行**: - ...

Global site tag (gtag.js) - Google Analytics