-
从 DOM 中移除元素。
-
Get text
返回指定元素及其后代的文本内容。
$el.text();
// Native
el.textContent;
Set text
设置元素的文本内容。
// jQuery
$el.text(string);
// Native
el.textContent = string;
-
Get HTML
// jQuery
$el.html();
// Native
el.innerHTML;
Set HTML
// jQuery
$el.html(htmlString);
// Native
el.innerHTML = htmlString;
-
Append 插入到子节点的末尾
-
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Native (HTML string)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
// Native (Element)
-
在选中元素前插入新节点
// jQuery
$newEl.insertBefore(queryString);
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}
-
在选中元素后插入新节点
// jQuery
$newEl.insertAfter(queryString);
// Native (HTML string)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');
// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}
-
如果匹配给定的选择器,返回true
// jQuery
$el.is(selector);
// Native
el.matches(selector);
-
移除所有子节点
//jQuery
$el.empty();
//Native
-
把每个被选元素放置在指定的HTML结构中。
//jQuery
$(".inner").wrap('<div class="wrapper"></div>');
//Native
Array.prototype.forEach.call(document.querySelector('.inner'), (el) => {
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
-
移除被选元素的父元素的DOM结构
// jQuery
$('.inner').unwrap();
// Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
let elParentNode = el.parentNode
if(elParentNode !== document.body) {
elParentNode.parentNode.insertBefore(el, elParentNode)
elParentNode.parentNode.removeChild(elParentNode)
}
});
-
用指定的元素替换被选的元素
//jQuery
$('.inner').replaceWith('<div class="outer"></div>');
//Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'),(el) => {
const outer = document.createElement("div");
outer.className = "outer";
el.parentNode.insertBefore(outer, el);
el.parentNode.removeChild(el);
});