DEMO1:
<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
document.body.appendChild(a); //默认添加在文档的最后。
//如果我们想指定位置，那么得使用insertBefore()
}
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div>bbbbbbbbb</div>
</body>
DEMO2:
<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
var mubiao = document.getElementById("b");
mubiao.parentNode.insertBefore(a,mubiao);
//插入到div b 前面。
/*
parentElement.insertBefore( newElement , targetElement );
从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。
其实我们可以不管 父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。
那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。
那么有没有 insertAfter()方法呢？答案看下个例子。
*/
}
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div id="b">bbbbbbbbb</div>
</body>
DEMO3:
<SCRIPT LANGUAGE="JavaScript">
// DOM没有提供insertAfter()方法，所以我们只能自己写一个。
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
var mubiao = document.getElementById("b");
insertAfter(a,mubiao);
}
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div id="b">bbbbbbbbb</div>
<div>dddddd</div>
</body>
分享到：
相关推荐
在 JavaScript 中，appendChild 和 insertBefore 是两个常用的方法，用于在 DOM 中插入新的节点。但是，很多开发者对这两个方法的使用和区别不是很清楚，本文将详细解析这两个方法的用法和区别。 appendChild 方法 ...
obj = document.createElement(tag)创建一个标签，oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用，appendChild将创建的元素依次加在后面，而insertBefore则可以将...
`appendChild`、`insertBefore`以及非标准的`insertAfter`方法都是用于管理DOM树中节点关系的重要方法。下面我们将详细探讨这三个方法的功能、用法及实际应用。 1. `appendChild(newChild: Node)`: 这个方法将`new...
21、原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如下函数实现 22、原生JavaScript中兼容浏览器绑定元素事件 23、原生JavaScript光标停在文字的后面，文本框获得焦点时调用 24、原生JavaScript...
- **添加删除元素**：appendChild、removeChild、insertBefore等方法。 4. **AJAX异步通信** - **XMLHttpRequest对象**：用于在后台与服务器进行数据交换，实现页面无刷新更新。 - **fetch API**：现代浏览器更...
在DOM操作中，经常会需要向页面中添加新的元素节点，这时就可以使用appendChild和insertBefore两个方法。本文将详细介绍这两个方法的使用场景、语法以及它们之间的差异。 ### appendChild()方法 appendChild()方法...
至于插入新元素，`JavaScript` 的 `insertBefore()` 方法需要指定目标元素作为参数，而 `jQuery` 提供了 `after()`, `insertAfter()`, `before()`, `insertBefore()` 四个方法，操作起来更为直观。 除了以上提到的...
这些方法只是JavaScript庞大知识体系中的一部分，实际开发中还需要结合DOM操作、AJAX请求、模板引擎、模块化、错误处理等方面的知识。在使用这些方法时，请确保进行充分的测试和验证，以确保代码的正确性和兼容性。...
在JavaScript中，DOM（文档对象模型）操作是网页动态交互的核心。以下是一些常见的JavaScript DOM操作方法，这些方法在ASP.NET环境下同样适用： 1. `appendChild` 方法：这个方法用于在指定元素的子节点列表末尾...
- 插入节点：使用appendChild或insertBefore方法将新节点添加到DOM树中。 - 删除节点：使用removeChild方法从DOM树中移除节点。 - 替换节点：使用replaceChild方法替换DOM树中的节点。 - 修改节点：可以修改节点的值...
需要注意的是，使用 createElement() 创建的节点不会自动添加到文档中，需要使用 appendChild() 或 insertBefore() 方法将其添加到文档中。 createTextNode() 方法 createTextNode() 方法用于创建一个新的文本节点...
- **插入节点**：使用`appendChild`、`insertBefore`等方法将新创建的节点插入到文档中。 - **删除节点**：使用`removeChild`方法来移除文档中的某个节点。 - **替换节点**：使用`replaceChild`方法来替换文档中的一...
首先，让我们深入探讨JavaScript中非常重要的DOM操作方法：appendChild和insertBefore。 appendChild方法用于将一个节点添加到指定节点的子节点列表的末尾。它的使用非常直接，接受一个参数newChild，代表即将添加...
**jQuery库与原生JavaScript常用方法** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个博客主要探讨了jQuery库与原生JavaScript之间的对比，以及它们各自的一些常用...
在具体使用中，insertBefore()方法的语法结构是 $(selector).insertBefore(content)，其中selector是需要被插入的元素，content是在之前要插入这些元素的选择器。简单来说，这个方法允许我们将页面上的元素移动到...
本文将深入探讨JavaScript如何操作XML的所有属性、事件和方法，并通过实例来阐述其用法。 一、JavaScript与XML的交互 1. 创建XML对象：在JavaScript中，可以使用`ActiveXObject`（仅限IE）或`DOMParser`（跨浏览器...
在JavaScript中，DOM操作主要包括以下几个核心知识点： 1. **获取元素**：最基础的操作是获取页面上的元素，可以使用`document.getElementById()`，`document.getElementsByTagName()`，`document.querySelector()`...
其中，对节点进行插入和移动操作是非常常见的需求，而jQuery通过提供了一组简单易用的方法来实现这些操作，本文将详细介绍其中的insertAfter和insertBefore方法。 ### 插入节点 在进行DOM元素插入操作时，我们可以...
JavaScript是一种广泛应用于网页和网络应用的脚本语言，尤其在前端开发中占据核心地位。"javascript_日历源码"这个主题聚焦于JavaScript实现的日历功能，这在很多网站和应用中都十分常见，比如用于事件管理、日期...