原生JS和jQuery操作DOM对比总结

document.createElement("p");

$('<p></p>');`

`document.createTextNode("Text Content");

var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);

var $p = $('<p>Hello World.</p>');

var newEl = pEl.cloneNode(true); `

$newEl = $('#pEl').clone(true);

El.appendChild(newNode);

El.insertBefore(newNode, targetNode);

$('#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');

El.parentNode.removeChild(El);

$('#El').remove();

El.repalceChild(newNode, oldNode);

$('p').replaceWith('<p>Hello World.</p>');

imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;

$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");