<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<div id="d1">

    <div id="d1_1"></div>

    <div id="d1_2"></div>

</div>

<div id="d2">你好

    <div id="d2_1">我是狗</div>

    <div id="d2_2"></div>

</div>

<table>

<tr>

<p>

<td id="haha">haha</td>

</p>

</tr>

</table>

<script type="text/javascript">

var mylibs = {

    first:function(elem){

        return elem && (elem.firstElementChild || elem.firstChild);

    },

    last:function(elem){

        return elem && (elem.lastElementChild || elem.lastChild);

    },

    prev:function(elem){

        return elem && (elem.previousElementSibling || elem.previousSibling);

    },

    next:function(elem){

        return elem && (elem.nextElementSibling || elem.nextSibling);

    },

    before:function(newElement,targetElement){

        return targetElement && targetElement.parentNode ?

            targetElement.parentNode.insertBefore(newElement,targetElement) :

            null;

    },

    after:function(newElement,targetElement){

        return targetElement && this.last(targetElement) == targetElement ?

            // 如果最后的节点是目标元素，则直接添加。因为默认是最后

            this.before(newElement,targetElement)

        :

            //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面

            this.before(newElement, this.next(targetElement));

    },

    replace:function(elem,newElement,oldElement){

    },

    remove:function(elem){

        return elem.parentNode.removeChild(elem);

    },

    empty:function(elem){

        elem.innerHTML = '';

        return elem;

    },

    append:function(elem,newElement){

        return elem.appendChild(newElement);

    },

    text:function(elem,value){

        return value === undefined ?

            elem.textContent || elem.innerHTML.replace(/<[^<]+>/g,'')

        :

            this.append(this.empty(elem),(elem && elem.ownerDocument || document).createTextNode(value));

    },

    html:function(elem,value){

        if(value === undefined && elem.nodeType === 1)

            return elem.innerHTML;

        if(typeof value === 'string' && /<(?:script|style|link)/i.test(value)){

            value = value.replace(/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,'<$1></$2>');

            elem.innerHTML = value;

        }

        if(elem){

            this.append(this.empty(elem),value);

        }

    }

    /*append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在

remove() - 删除被选元素（及其子元素）

empty() - */

};

var dom1 = document.getElementById('d1'),

    dom2 = document.getElementById('d2');

var tmp = document.createElement('div');

console.log(mylibs.after(tmp,dom2));

</script>

</body>

</html>

自己封装的操作DOM方法的更多相关文章

  1. 【分享】 封装js操作textarea 方法集合(兼容很好)。

    请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下.         在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...

  2. 用原型封装一个操作DOM的例子

    <script> // 一句话 在构造函数里面写属性 在原型里面写方法 function Elem(d){ this.even=document.getElementById(d); } ...

  3. js操作textarea方法集合

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法

    此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...

  5. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  6. 封装JDBC操作数据库的方法

    自己动手封装java操作数据库的方法: 一:目录结构 二:所需依赖的第三方jar包 这里只需引入mysql-connector-java-5.1.8-bin.jar,mysql数据库驱动jar包 三: ...

  7. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  8. zepto在操作dom的selected和checked属性时尽量使用prop方法

    zepto在操作dom的selected和checked属性时尽量使用prop方法.

  9. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

随机推荐

  1. Android 沉浸式状态栏 实现方式二 ( 更简单 )

    以前写过一个沉浸式状态栏 的实现方式 Android 沉浸式状态栏 实现方式一 现在有个更为简单的实现方式 . 相关链接 http://www.apkbus.com/forum.php?mod=vie ...

  2. OC中的面向对象语法3

    一. set方法和get方法 1. set方法和get方法的使用场合 @public的成员可以被随意赋值,应该使用set方法和get方法来管理成员的访问(类似机场的安检.水龙头过滤,过滤掉不合理的东西 ...

  3. iOS 从Xcode看应用支持横竖屏

    要看一个应用是否支持横竖屏,要看Xcode里面的info.plist文件设置才清楚,每一个新建工程都会包含三个支持方式,即Supported interface orientations里面的就是 P ...

  4. eclipse maven 插件 安装 和 配置

    eclipse 安装插件的方式最常见的有两种: 离线安装,用 link 的方式来安装,这种方式可拔性更好,可以随时将插件插上和拔下,非常方便.  link 离线安装 eclipse maven 插件 ...

  5. [转载]Emmet使用

    转载地址:http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语 ...

  6. android Gui系统之SurfaceFlinger(1)---SurfaceFlinger概论

    GUI 是任何系统都很重要的一块. android GUI大体分为4大块. 1)SurfaceFlinger 2)WMS 3)View机制 4)InputMethod 这块内容非常之多,但是理解后,可 ...

  7. CYQ.Data 数据框架 使用篇一 入门指南

    快速使用帮助 | 回贴(13) | 浏览(11303) | 发表日期 :2010-12-20 20:12:29   #楼主   本文针对V5版本进行修改于(2016-07-04) 下面是使用步骤: 一 ...

  8. linux 学习随笔-group和user管理

    1:/etc/passwd 打开该文件,可以看到每一行内容被分割成了7个字段比如:root:x:0:0:root:/root:/bin/bash 第一个字段表示用户名为root用户 第二个字段存放了该 ...

  9. WPF学习之路（十二）控件（HeaderedContent控件）

    GroupBox 用来组织多种控件的常见控件,因为是内容空间,只能直接包含一项,需要使用面板一类的中间空间. Header和Content可以是任意元素 <GroupBox> <Gr ...

  10. Android中的单例模式

    定义: 单例模式:确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 使用场景: 确保某一个类有且只有一个对象的场景,避免产生多个对象消耗过多的资源,或者某种类型的对象只应该有且只有一 ...