一.Jquery方法
1.在被选元素的结尾插入 HTML 元素
$(content).appendTo(selector)
content | 必需。规定要插入的内容(必须包含 HTML 标签)。 注意:如果 content 是已存在的元素,它将从当前位置被移除,并在被选元素的结尾被插入。 |
selector | 必需。规定把内容追加到哪个元素上。 |
$("button").click(function(){ $("<span>Hello World!</span>").appendTo("p"); });
2.在被选元素后插入 HTML 元素
$(content).insertAfter(selector)
content | 必需。规定要插入的内容(必须包含 HTML 标签)。 注意:如果 content 是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之后。 |
selector | 必需。规定在何处插入内容。 |
$("button").click(function(){ $("<span>Hello world!</span>").insertAfter("p"); });
3.在被选元素前插入 HTML 元素
$(content).insertBefore(selector)
content | 必需。规定要插入的内容(必须包含 HTML 标签)。 注意:如果 content 是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之前。 |
selector | 必需。规定在何处插入内容。 |
$("button").click(function(){ $("<span>Hello world!</span>").insertBefore("p"); });
4.在被选元素的开头插入 HTML 元素
$(content).prependTo(selector)
content | 必需。规定要插入的内容(必须包含 HTML 标签)。 注意:如果 content 是已存在的元素,它将从当前位置被移除,并在被选元素的开头被插入。 |
selector | 必需。规定把内容预加到哪个元素上。 |
$("button").click(function(){ $("<span>Hello World!</span>").prependTo("p"); });
5.把被选元素替换为新的 HTML 元素
$(content).replaceAll(selector)
content | 必需。规定要插入的内容(必须包含 HTML 标签)。 |
selector | 必需。规定哪一个元素将被替换。 |
$("button").click(function(){ $("<span>Hello world!</span>").replaceAll("p:last"); });
6.生成被选元素的副本
$(selector).clone(true|false)
true | 规定需复制事件处理程序。 |
false | 默认。规定不复制事件处理程序。 |
$("button").click(function(){ $("p").clone().appendTo("body"); });
二.JavaScript方法
1.DOM创建
var el1 = document.createElement('div'); var el2 = document.createElement('input'); var node = document.createTextNode('hello world!');
2.DOM查询
document.getElementById();//id
document.getElementsByTagName();//标签名;Elements加了S,选出来是类数组;
document.getElementsByName();//name属性,部分标签可以;Elements加了S,选出来是类数组;
document.getElementsByClassName();//class;Elements加了S,选出来是类数组;IE9以下不支持;
3.DOM更改
// 添加、删除子元素 ele.appendChild(el); ele.removeChild(el); // 替换子元素 ele.replaceChild(new, old); // 插入子元素 parentElement.insertBefore(newElement, referenceElement);
4.DOM拷贝
node.cloneNode(deep)
参数 | 类型 | 描述 |
---|---|---|
deep | Boolean | 可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点,不会复制内容。 |
var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node);