jquery以及JavaScript 对HTML元素的操作方法

一.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);