js,jQuery操作节点，获取、设置属性，操作class属性

1，创建元素节点：

js:   document.createElement("div")

jQuery:  $("<div></div>")

2,创建文本节点并添加到某个元素节点：

js:   var e1 =  document.createTextNode("text content"); // 创建文本节点

      var e2 = document.createElement("p");  // 创建元素节点

       e2.appendChild(e1);

jQuery:  var e3 = $("<p>text content</p>");

3,复制节点：

js:   var newElement = e3.cloneNode(true);

   括号内些true或false，区别：true:克隆整个‘<p>text content</p>’ 节点；false:  克隆 ‘<p></p>’ ，不克隆里面的文字

jQuery:  var newElement2 = $("#e3").clone(true); // 避免id重复

4，插入节点：

js:   节点末尾添加新的子节点：

El.appendChild(newNode); // El 是一个父元素

      节点前面添加新的子节点： 

El.insertBefore(newNode,targetNode); // targetNode 是父元素中的某个子元素；

jquery:  在匹配元素子节点列表末尾添加子节点：（内部）

  $("#el").append("<p>Hello world</p>");

            把匹配的元素节点添加到目标元素节点内部结尾：（内部）

$("<p>hello world</p>").appendTo("#el");

在匹配元素元素子节点列表开头添加内容：（内部）

$("#el").prepend("<p>hello world</p>");

把匹配的元素添加到目标元素子节点列表开头：（内部）

$("<p>hello world</p>").prependTo("#el");

•  在匹配元素之前添加目标内容
   
   $('#El').before('<p>Hello World.</p>');
   
  把匹配元素添加到目标元素之前
   
   $('<p>Hello World.</p>').insertBefore('#El');
   
  在匹配元素之后添加目标内容
   
   $('#El').after('<p>Hello World.</p>');
   
  把匹配元素添加到目标元素之后
   
   $('<p>Hello World.</p>').insertAfter('#El'); 

5，删除节点：

js:  el.parentNode.removeChild(el)

jQuery:  $("#el").remove()

6，替换节点：

js:  el.replaceChild(newNode,oldNode);  // oldNode必须是一个真实存在的子节点；

jquery: $("p").replaceWith("<p>hello world</p>")

7，获取、设置元素属性

js:  设置属性：   .setAttribute("属性"，“属性值”)

      获取属性：  .getAttribute("属性")

jquery:   设置属性：   .attr("属性"，“值”)

              获取属性：  .attr("属性")

              可以用prop读取dom原生属性：

$("#el").prop("name","hello"); // 赋值

$("#el").prop("name"); // 取值

8，操作元素的class属性：

JS:
<!-- span元素原有class = "test" -->
<span class="test"></span>

var ele = document.getElementByClassName("test")

方法一，直接赋值，会覆盖原有的值：ele.className = "test1"

方法二：利用className为字符串的属性，可以在原有的class属性后面添加或删除class；

              ele.className += " test2";  // 记得加空格；

方法三：利用classList 属性的add(),remove()方法添加或者删除属性值：

ele.classList.add("test3");   ele.classList.remove("test");

jQuery:

<!-- span元素原有class = "test" -->
<span class="test"></span>

$("span").addClass(“test1 test2")；// addClass()   添加类属性值

$("span").removeClass("test1"); //  removeClass()   删除类属性值

$("span").toggleClass("test3");  // 切换类属性值；点击一次添加类属性值，再点击一次删除类属性值；