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);
}
}
分享到:
相关推荐
几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结
JavaScript 中的 AppendChild 和 InsertBefore 用法详细解析 在 JavaScript 中,appendChild 和 insertBefore 是两个常用的方法,用于在 DOM 中插入新的节点。但是,很多开发者对这两个方法的使用和区别不是很清楚...
首先,让我们深入探讨JavaScript中非常重要的DOM操作方法:appendChild和insertBefore。 appendChild方法用于将一个节点添加到指定节点的子节点列表的末尾。它的使用非常直接,接受一个参数newChild,代表即将添加...
总结来说,虽然DOM标准没有提供`insertAfter()`方法,但我们可以通过组合现有的方法,例如`insertBefore()`和`appendChild()`,以及通过编程判断目标元素位置,来实现这一功能。这样的方法不仅能够满足开发中的特定...
AppendChild()方法将新节点添加到指定节点的子节点列表的末尾,而InsertAfter()和InsertBefore()方法可以将新节点插入到指定节点的子节点列表中的特定位置。 增加节点属性 可以使用SetAttribute()方法将属性添加到...
在使用jQuery时,我们可以直接调用`insertAfter()`方法来进行元素的插入操作,但理解原生JavaScript实现的方法原理对于我们理解DOM操作以及调试和维护代码都是非常有帮助的。 此外,在使用上述函数时,还应注意以下...
在JavaScript中,DOM操作是构建动态网页的关键技术之一。`insertAfter()`方法是一个非常实用的函数,用于在已有的DOM元素之后插入新的元素。虽然JavaScript的原生DOM API并未提供这个方法,但我们可以自定义一个函数...
不过需要强调的是,虽然在JavaScript中没有内置的insertAfter()方法,但是通过现有的DOM操作API,如appendChild()和insertBefore()等,我们可以实现类似的功能。这些知识点不仅对于理解文档中的示例代码至关重要,也...
然后,你可以使用`appendChild`、`insertBefore`或`insertAfter`方法将这个新元素添加到DOM树中。`appendChild`会将指定的节点添加到当前节点的末尾,而`insertBefore`则允许你在特定的现有子节点之前插入新节点。`...
在这个讨论中,我们将深入理解JavaScript中的DOM操作,特别是`insertAfter()`函数,这是一个非标准但非常实用的方法,用于在已存在元素之后插入新的元素。 `insertAfter()`函数,如文件描述所示,是JavaScript标准...
需要注意的是,如果在文档中已经存在节点,那么调用这些方法(`appendChild()`、`insertBefore()`、自定义的`prependChild()`和`insertAfter()`)将会从当前位置将该节点移动到新位置。所以,这些方法不仅仅添加节点...
至于插入新元素,`JavaScript` 的 `insertBefore()` 方法需要指定目标元素作为参数,而 `jQuery` 提供了 `after()`, `insertAfter()`, `before()`, `insertBefore()` 四个方法,操作起来更为直观。 除了以上提到的...
DOM 提供了一个平台和语言中立的接口,使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。 - **核心 DOM**:提供了一个用于任何结构化文档的标准模型。 - **XML DOM**:提供了用于 XML 文档的标准模型,...
当然,如果你需要在不使用jQuery的情况下实现这个功能,可以使用原生JavaScript的DOM操作方法,如`appendChild()`、`removeChild()`和`insertBefore()`等。 总结,通过理解HTML的`<select>`和`<option>`元素,结合...
本文将深入探讨如何使用JavaScript来添加、替换和删除节点元素,从而达到动态修改网页内容的目的。 首先,要理解DOM树的概念。DOM将HTML文档建模为树结构,其中每个HTML元素都是树中的一个节点。JavaScript提供了...
5. **insertAfter(target)**: 类似于`insertBefore()`, `insertAfter()`方法将每个匹配的元素插入到另一个指定元素之后。这可以帮助在现有元素后创建新的内容。 这些jQuery方法极大地简化了DOM操作,使开发者能够...
综上所述,原生JavaScript并没有提供一个直接的方法来实现给指定元素的后面追加内容,但通过结合使用父节点的appendChild方法和insertBefore方法,我们可以自定义一个函数来实现这一功能。这个自定义函数insertAfter...
通过DOM操作,如`createElement()`、`appendChild()`或`insertBefore()`,可以在表格的末尾或指定位置插入新行。 - 在数据库环境中,如SQL,可以使用`INSERT INTO`语句向表中添加新的记录。 2. **删除行**: - ...