操作DOM的一些有用的综合方法/函数 [二]

* 关于向不同的位置添加元素

1. 向某个元素之前添加元素节点

如下

<div>

         <h1 id="welcome">hi! </h1>

</div>

如果想在h1元素(假设变量名叫nodeH)前且在当前div中添加一个P元素(假设变量名叫nodeP), 可以直接调用 dom的 insertBefore函数。

var nodeH = document.getElementById("welcome");

var nodeP = document.createElement("p");

var pText = document.createTextNode("any text here");

nodeP.appendChild(pText);

insertBefore(nodeP, nodeH);




2. 向某个元素之后添加元素节点

//Dom不提供默认的方法 所以自定义

//获取destEle的父节点, 如果父节点的最后一个节点是当前节点, 则直接在父节点上做appendChild.

//如果不是(即destEle是父节点多个元素节点中的一个,位置不在末尾。此时我们可以在destEle的下一个元素节点前添加这个元素节点)

//保险起见, 检查一下传入参数的nodeType, 需要是元素节点。


function InsertElementAfter(newEle, destEle) {

if (newEle == null) return false;

if (destEle == null) return false;

if (newEle.nodeType != 1) return false;

if (destEle.nodeType != 1) return false;

var parent = destEle.parentNode; //parentNode一定是返回的元素节点 所以不用再检查

if (destEle == parent.lastChild) {

parent.appendChild(newEle);

} else {

parent.insertBefore(newEle, destEle.nextSibling); //由于destEle本身是元素节点, 所以nextSibling也不用担心他是什么节点。直接再同级树层次中添加即可.

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 689评论 0 1
  • Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为N...
    Maggie_77阅读 427评论 0 0
  • 本篇是基于《JavaScript高级程序设计(第3版)》DOM相关章节做的整理与归纳,概述了DOM的常见节点类型及...
    查查查查查查克阅读 2,588评论 2 7
  • 前言 归根结底,代码都是思想和概念的体现。没人能把一种程序设计语言的所有语法和关键字都记住,可以查阅参考书来解决。...
    朱细细阅读 2,989评论 4 14
  • 今早不知怎么着,起来后觉的很是疲乏,腿酸不想动。昨晚上休息的挺好的,就是感觉气在神阙穴那里堵着,通不下去,但并不影...
    王悦yue阅读 146评论 0 4