1.1 原生JS创建元素节点
1
document.createElement("p");
1
$('');`
1
`document.createTextNode("Text Content");
通常创建文本节点和创建元素节点配合使用，比如：
1
2
3vartextEl =document.createTextNode("Hello World.");
varpEl =document.createElement("p");
pEl.appendChild(textEl);
1
var$p = $('
Hello World.
');1
varnewEl = pEl.cloneNode(true);`
true和false的区别：
true：克隆整个'
Hello World.
'节点false：只克隆''，不克隆文本Hello World.'
1
$newEl = $('#pEl').clone(true);
注意：克隆节点要避免`ID重复
1
El.appendChild(newNode);
原生JS在节点的已有子节点之前插入一个新的子节点：
1
El.insertBefore(newNode, targetNode);
在匹配元素子节点列表结尾添加内容
1
$('#El').append('
Hello World.
');把匹配元素添加到目标元素子节点列表结尾
1
$('
Hello World.
').appendTo('#El');在匹配元素子节点列表开头添加内容
1
$('#El').prepend('
Hello World.
');把匹配元素添加到目标元素子节点列表开头
1
$('
Hello World.
').prependTo('#El');在匹配元素之前添加目标内容
1
$('#El').before('
Hello World.
');把匹配元素添加到目标元素之前
1
$('
Hello World.
').insertBefore('#El');在匹配元素之后添加目标内容
1
$('#El').after('
Hello World.
');把匹配元素添加到目标元素之后
1
$('
Hello World.
').insertAfter('#El');1
El.parentNode.removeChild(El);
1
$('#El').remove();
1
El.repalceChild(newNode, oldNode);
注意：oldNode必须是parentEl真实存在的一个子节点
1
$('p').replaceWith('
Hello World.
');1
2
3
4imgEl.setAttribute("title","logo");
imgEl.getAttribute("title");
checkboxEl.checked =true;
checkboxEl.checked;
1
2
3
4$("#logo").attr({"title":"logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked":true});
$("#checkbox").prop("checked");
