• DOM Manipulation

DOM Manipulation

• 3.1 Remove 从 DOM 中移除元素。 // jQuery$el.remove();// Nativeel.parentNode.removeChild(el);
• 3.2 Text

Get text 返回指定元素及其后代的文本内容。 // jQuery$el.text();// Nativeel.textContent; Set text 设置元素的文本内容。 // jQuery$el.text(string);// Nativeel.textContent = string;

• 3.3 HTML

Get HTML // jQuery$el.html();// Nativeel.innerHTML; Set HTML // jQuery$el.html(htmlString);// Nativeel.innerHTML = htmlString;

• 3.4 Append Append 插入到子节点的末尾 // jQuery$el.append(“hello”);// Native (HTML string)el.insertAdjacentHTML(‘beforeend’, ‘Hello World’);// Native (Element)el.appendChild(newEl);
• 3.5 Prepend // jQuery$el.prepend(“hello”);// Native (HTML string)el.insertAdjacentHTML(‘afterbegin’, ‘Hello World’);// Native (Element)el.insertBefore(newEl, el.firstChild);
• 3.6 insertBefore 在选中元素前插入新节点 // jQuery$newEl.insertBefore(queryString);// Native (HTML string)el.insertAdjacentHTML(‘beforebegin ‘, ‘Hello World’);// Native (Element)const el = document.querySelector(selector);if (el.parentNode) { el.parentNode.insertBefore(newEl, el);}
• 3.7 insertAfter 在选中元素后插入新节点 // jQuery$newEl.insertAfter(queryString);// Native (HTML string)el.insertAdjacentHTML(‘afterend’, ‘Hello World’);// Native (Element)const el = document.querySelector(selector);if (el.parentNode) { el.parentNode.insertBefore(newEl, el.nextSibling);}
• 3.8 is 如果匹配给定的选择器，返回true // jQuery $el.is(selector); // Native el.matches(selector);
• 3.9 clone 深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。） //jQuery$el.clone();//Nativeel.cloneNode();//深拷贝添加参数‘true’
• 3.10 empty 移除所有子节点

//jQuery$el.empty();//Nativeel.innerHTML = '';

• 3.11 wrap 把每个被选元素放置在指定的HTML结构中。 //jQuery$(“.inner”).wrap(‘’);//NativeArray.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);});
• 3.12 unwrap 移除被选元素的父元素的DOM结构 // jQuery$(‘.inner’).unwrap();// NativeArray.prototype.forEach.call(document.querySelectorAll(‘.inner’), (el) => { let elParentNode = el.parentNode if(elParentNode !== document.body) { elParentNode.parentNode.insertBefore(el, elParentNode) elParentNode.parentNode.removeChild(elParentNode) }});
• 3.13 replaceWith 用指定的元素替换被选的元素 //jQuery$(‘.inner’).replaceWith(‘’);//NativeArray.prototype.forEach.call(document.querySelectorAll(‘.inner’),(el) => { const outer = document.createElement(“div”); outer.className = “outer”; el.parentNode.insertBefore(outer, el); el.parentNode.removeChild(el);});
• 3.14 simple parse 解析 HTML/SVG/XML 字符串 // jQuery$(a b c d);// Nativerange = document.createRange();parse = range.createContextualFragment.bind(range);parse(a b c d);