jQueryDOM节点操作：

js创建节点：
创建流程：
1.创建元素 document.createElement()
2.为节点添加一下属性 element.setAttribute();
3.可以使用innerText或则innerHTML属性添加文本或则HTML内容
4.使用parentElement.appendChild()方法将新创建的节点添加到父节点中
window.onload = function () {
创建DIV节点
var div = document.createElement(“div”);
给创建的节点添加class属性
div.setAttribute(“class”, “box”);
给创建的节点添加HTML内容
div.innerHTML = “这是一个通过JS动态添加的div”;
将节点添加到body元素中
document.body.appendChild(div);
}
1. jQuery节点的插入 向元素的内部插入DOM节点
①append() 向每个匹配的元素内部追加内容
②appendTo() 把所有匹配的元素追加到另一个指定的元素元素集合中。
③prepend() 向每个匹配的元素内部前置内容
④prependTo() 把所有匹配的元素前置到另一个、指定的元素元素集合中
Jq创建节点：
jQuery节点的创建:$()函数处理，$(“html结构”)
jQuery创建的节点是一个jQuery对象
KaTeX parse error: Expected '}', got 'EOF' at end of input: … 通过jQuery的()函数创建div节点并添加属性与文本内容
var div = $(“

这是一个通过jQuery动态添加的div

”);
$div.attr(“class”, “box”);
通过jQuery中的append()方法将新创建的节点添加到body元素中
$(“body”).append(div);
$(“body”).append(“

这是一个通过jQuery动态添加的div

”);
});
节点外部插入：
1.after()与before() 方法
after(content|fn):在每个匹配的元素之后插入内容。
- $(A).after(B); 在A后面插入B元素
before(content|fn):在每个匹配的元素之前插入内容。
- $(A).before(B);在A前面插入B元素
function afterFun() {
$(A).after(B); 在A后面插入B元素
$("#box").after(“

通过jQuery中的after方法动态的添加P标签

”);
}
function beforeFun() {
$(A).before(B);在A前面插入B元素
$("#box").before(“

通过jQuery中的before方法动态的添加P标签

”);
}
2.insertAfter()与insertBefore()
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
$(A).insertAfter(B)在B后面插入A元素与$(A).after(B)是相反的操作，但是功能一样
insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
$(A).insertBefore(B)在B前面面插入A元素与$(A).before(B)是相反的操作，但是功能一样
function insertAfterFun() {
$(A).insertAfter(B) 在B后面插入A元素
$(“

通过jQuery中的insertAfter方法动态的添加P标签

”).insertAfter("#box");
}
function insertBeforeFun() {
$(A).insertBefore(B) 在B前面面插入A元素
$(“

通过jQuery中的insertBefore方法动态的添加P标签

”).insertBefore("#box");
}