`
fastwind
  • 浏览: 324273 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

javascript中的insertBefore方法

阅读更多

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>

分享到:
评论

相关推荐

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

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

    JavaScript:createElement和insertBefore

    obj = document.createElement(tag)创建一个标签,oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用,appendChild将创建的元素依次加在后面,而insertBefore则可以将...

    JavaScript之appendChild、insertBefore和insertAfter使用说明

    `appendChild`、`insertBefore`以及非标准的`insertAfter`方法都是用于管理DOM树中节点关系的重要方法。下面我们将详细探讨这三个方法的功能、用法及实际应用。 1. `appendChild(newChild: Node)`: 这个方法将`new...

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    21、原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法?用如下函数实现 22、原生JavaScript中兼容浏览器绑定元素事件 23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript...

    javascript中文使用手册

    - **添加删除元素**:appendChild、removeChild、insertBefore等方法。 4. **AJAX异步通信** - **XMLHttpRequest对象**:用于在后台与服务器进行数据交换,实现页面无刷新更新。 - **fetch API**:现代浏览器更...

    初学js插入节点appendChild insertBefore使用方法

    在DOM操作中,经常会需要向页面中添加新的元素节点,这时就可以使用appendChild和insertBefore两个方法。本文将详细介绍这两个方法的使用场景、语法以及它们之间的差异。 ### appendChild()方法 appendChild()方法...

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

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

    JavaScript的常用方法的集合

    这些方法只是JavaScript庞大知识体系中的一部分,实际开发中还需要结合DOM操作、AJAX请求、模板引擎、模块化、错误处理等方面的知识。在使用这些方法时,请确保进行充分的测试和验证,以确保代码的正确性和兼容性。...

    javascript 操作 dom 的常用方法

    在JavaScript中,DOM(文档对象模型)操作是网页动态交互的核心。以下是一些常见的JavaScript DOM操作方法,这些方法在ASP.NET环境下同样适用: 1. `appendChild` 方法:这个方法用于在指定元素的子节点列表末尾...

    在javascript中对于DOM的加强

    - 插入节点:使用appendChild或insertBefore方法将新节点添加到DOM树中。 - 删除节点:使用removeChild方法从DOM树中移除节点。 - 替换节点:使用replaceChild方法替换DOM树中的节点。 - 修改节点:可以修改节点的值...

    javascriptjs创建节点

    需要注意的是,使用 createElement() 创建的节点不会自动添加到文档中,需要使用 appendChild() 或 insertBefore() 方法将其添加到文档中。 createTextNode() 方法 createTextNode() 方法用于创建一个新的文本节点...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    - **插入节点**:使用`appendChild`、`insertBefore`等方法将新创建的节点插入到文档中。 - **删除节点**:使用`removeChild`方法来移除文档中的某个节点。 - **替换节点**:使用`replaceChild`方法来替换文档中的一...

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

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

    jquery 库与原生javascript 常用方法

    **jQuery库与原生JavaScript常用方法** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个博客主要探讨了jQuery库与原生JavaScript之间的对比,以及它们各自的一些常用...

    jQuery中insertBefore()方法用法实例

    在具体使用中,insertBefore()方法的语法结构是 $(selector).insertBefore(content),其中selector是需要被插入的元素,content是在之前要插入这些元素的选择器。简单来说,这个方法允许我们将页面上的元素移动到...

    javascript 操作xml的所有属性事件方法和实例

    本文将深入探讨JavaScript如何操作XML的所有属性、事件和方法,并通过实例来阐述其用法。 一、JavaScript与XML的交互 1. 创建XML对象:在JavaScript中,可以使用`ActiveXObject`(仅限IE)或`DOMParser`(跨浏览器...

    经典之作javascript dom编程艺术源码

    在JavaScript中,DOM操作主要包括以下几个核心知识点: 1. **获取元素**:最基础的操作是获取页面上的元素,可以使用`document.getElementById()`,`document.getElementsByTagName()`,`document.querySelector()`...

    jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    其中,对节点进行插入和移动操作是非常常见的需求,而jQuery通过提供了一组简单易用的方法来实现这些操作,本文将详细介绍其中的insertAfter和insertBefore方法。 ### 插入节点 在进行DOM元素插入操作时,我们可以...

    javascript_日历源码

    JavaScript是一种广泛应用于网页和网络应用的脚本语言,尤其在前端开发中占据核心地位。"javascript_日历源码"这个主题聚焦于JavaScript实现的日历功能,这在很多网站和应用中都十分常见,比如用于事件管理、日期...

Global site tag (gtag.js) - Google Analytics