dom的插入,移除,克隆

/*
dom的插入,移除,克隆
domo(‘dom0‘).clone()
*/
!(function (w) {
    w.domoperation = function (id) {
        var _class = new dom();
        _class.init(id);
        return _class;
    };
    w.dom = function () { };
    w.dom.prototype = {
        getid: function (id) {
            return document.getElementById(id)
        },
        parseDom: function (arg) {
            var objE = document.createElement("div");
            objE.innerHTML = arg;
            return objE.childNodes;
        },
        init: function (id) {
            this.Selector = [document.getElementById(id)];
        },
        getdom: function () {
            return this.Selector[0] ? this.Selector[0] : null;
        },
        append: function (html) {
            var dom = this.parseDom(html), getdom = this.getdom();
            for (var i = 0, j = dom.length; i < j; i++) {
                getdom.appendChild(dom[0]);
            }
        },
        appendTo: function (id) {
            this.getid(id).appendChild(this.getdom());
        },
        prepend: function (html) {
            var dom = this.parseDom(html), getdom = this.getdom();
            var first = getdom.firstChild;
            for (var i = 0, j = dom.length; i < j; i++) {
                getdom.insertBefore(dom[0], first);
            }
        },
        prependTo: function (id) {
            var _indom = this.getid(id);
            _indom.insertBefore(this.getdom(), _indom.firstChild);
        },
        after: function (html) {
            var dom = this.parseDom(html), getdom = this.getdom();
            if (getdom.parentNode.lastChild == getdom) {
                for (var i = 0, j = dom.length; i < j; i++) {
                    getdom.appendChild(dom[0]);
                }
            }
            else {
                var nextSibling = getdom.nextSibling;
                for (var i = 0, j = dom.length; i < j; i++) {
                    getdom.parentNode.insertBefore(dom[0], nextSibling);
                }
            }
        },
        before: function (html) {
            var dom = this.parseDom(html), getdom = this.getdom();
            for (var i = 0, j = dom.length; i < j; i++) {
                getdom.parentNode.insertBefore(dom[0], getdom);
            }
        },
        remove: function () {
            this.getdom().parentNode.removeChild(this.getdom());
        },
        clone: function (id) {
            var _jiedian = this.getdom().cloneNode(true);
            _jiedian.removeAttribute("id");
            return _jiedian;
        }
    }
    w.domo = w.domoperation;
})(window);

  

<!DOCTYPE html>
<html>
<head>
    <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone =no" name="format-detection" />
    <title>dom操作</title>
    <script src="/Script/Dom.js"></script>
    <style type="text/css">
        * { padding: 0px; margin: 0px; }
    </style>
</head>
<body>
    <div id="dom0"><span id="span">abc</span> dom0</div>
    <div id="dom1">dom1</div>
    <script type="text/javascript">
        var dom0 = document.getElementById(‘dom0‘);
        document.getElementById(‘span‘).onclick = function () {
            alert("abc");
        };
        alert(domo(‘dom0‘).clone().outerHTML);
        //getid(‘dom0‘).remove();
        //getid(‘dom1‘).append("<span style=‘color:red‘>span</span><div>def</div>")
    </script>
</body>
</html>

  

时间: 2024-10-09 05:43:15

dom的插入,移除,克隆的相关文章

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条

jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条 一丶jQ操作标签内文本 html() 标签元素中的内容 /** 替换的内容可以使一个js对象,jq对象,文本 **/ /* 获取值:获取选中标签元素的所有内容 ,包括标签*/ $('ul').html() " <li>1</li> <li&g

DOM外部插入insertAfter()与insertBefore()

DOM外部插入insertAfter()与insertBefore() 与内部插入处理一样,jQuery由于内容目标的位置不同,然增加了2个新的方法insertAfter与insertBefore .before()和.insertBefore()实现同样的功能.主要的区别是语法--内容和目标的位置. 对于before()选择表达式在函数前面,内容作为参数,而.insertBefore()刚好相反,内容在方法前面,它将被放在参数里元素的前面 .after()和.insertAfter() 实现同

DOM外部插入after()与before()

DOM外部插入after()与before() 节点与节点之前有各种关系,除了父子,祖辈关系,还可以是兄弟关系.之前我们在处理节点插入的时候,接触到了内部插入的几个方法,这节我们开始讲外部插入的处理,也就是兄弟之间的关系处理,这里jQuery引入了2个方法,可以用来在匹配I的元素前后插入内容 选择器的描述: before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML字符串,DOM 元素,元素数组,或者jQuery对象,用来插入到集合中每个匹配元素的前面或

DOM内部插入append()与appendTo()

DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见的就是把这个新创建的元素,当作页面某一个元素的子元素放到其内部.针对这样的处理,jQuery就定义2个操作的方法

JavaScript DOM实战:创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v

Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一个li,设置li内容为PHP,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=

迷你MVVM框架 avalonjs 学习教程6、插入移除处理

ms-if是属于流程绑定的一种,如果表达式为真值那么就将当前元素输出页面,不是就将它移出DOM树.它的效果与上一章节的ms-visible效果看起来相似的,但它会影响到:empty伪类,并能更节约性能.ms-if还有一个分支,叫ms-if-loop,它是配合ms-repeat绑定使用,因此以后再说. 我们可以通过以下例子比较一下两者: <!DOCTYPE HTML> <html> <head> <title>ms-if</title> <m

js浏览器操作DOM之插入DOM

当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做? 如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容,相当于"插入"了新的DOM节点. 如果这个DOM节点不是空的,那就不能这么做,因为innerHTML会直接替换掉原来的所有子节点. 有两个办法可以插入新的节点.一个是使用appendChild,把一个子

DOM—外部插入.after()、.before()、.insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo()

外部插入.after()..before()..insertAfter()和.insertBefore()与内部插入.prepend()和.prependTo() 1   .after(content)在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 2   .before(content)据参数设定,在匹配元素的前面插入内容 3   .after()和.before()共同点 都是用来对相对选中元素外部增加相邻的兄弟节点 都可以接收HTML字符串.DOM元素.元素数组,或者J