/*
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-07-29 02:34:25