DOM Manipulation

  • 3.1 Remove

    从 DOM 中移除元素。

    1. // jQuery
    2. $el.remove();
    3. // Native
    4. el.parentNode.removeChild(el);
    5. // Native - Only latest, NO IE
    6. el.remove();
  • 3.2 Text

    • Get text

      返回指定元素及其后代的文本内容。

      1. // jQuery
      2. $el.text();
      3. // Native
      4. el.textContent;
    • Set text

      设置元素的文本内容。

      1. // jQuery
      2. $el.text(string);
      3. // Native
      4. el.textContent = string;
  • 3.3 HTML

    • Get HTML

      1. // jQuery
      2. $el.html();
      3. // Native
      4. el.innerHTML;
    • Set HTML

      1. // jQuery
      2. $el.html(htmlString);
      3. // Native
      4. el.innerHTML = htmlString;
  • 3.4 Append

    Append 插入到子节点的末尾

    1. // jQuery
    2. $el.append("<div id='container'>hello</div>");
    3. // Native (HTML string)
    4. el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
    5. // Native (Element)
    6. el.appendChild(newEl);
  • 3.5 Prepend

    1. // jQuery
    2. $el.prepend("<div id='container'>hello</div>");
    3. // Native (HTML string)
    4. el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
    5. // Native (Element)
    6. el.insertBefore(newEl, el.firstChild);
  • 3.6 insertBefore

    在选中元素前插入新节点

    1. // jQuery
    2. $newEl.insertBefore(queryString);
    3. // Native (HTML string)
    4. el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
    5. // Native (Element)
    6. const el = document.querySelector(selector);
    7. if (el.parentNode) {
    8. el.parentNode.insertBefore(newEl, el);
    9. }
  • 3.7 insertAfter

    在选中元素后插入新节点

    1. // jQuery
    2. $newEl.insertAfter(queryString);
    3. // Native (HTML string)
    4. el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');
    5. // Native (Element)
    6. const el = document.querySelector(selector);
    7. if (el.parentNode) {
    8. el.parentNode.insertBefore(newEl, el.nextSibling);
    9. }
  • 3.8 is

    如果匹配给定的选择器,返回true

    1. // jQuery
    2. $el.is(selector);
    3. // Native
    4. el.matches(selector);
  • 3.9 clone

    深拷贝被选元素。(生成被选元素的副本,包含子节点、文本和属性。)

    1. //jQuery
    2. $el.clone();
    3. //Native
    4. //深拷贝添加参数'true'
    5. el.cloneNode();
  • 3.10 empty

    移除所有子节点

    1. //jQuery
    2. $el.empty();
    3. //Native
    4. el.innerHTML = '';
  • 3.11 wrap

    把每个被选元素放置在指定的HTML结构中。

    1. //jQuery
    2. $(".inner").wrap('<div class="wrapper"></div>');
    3. //Native
    4. Array.prototype.forEach.call(document.querySelector('.inner'), (el) => {
    5. const wrapper = document.createElement('div');
    6. wrapper.className = 'wrapper';
    7. el.parentNode.insertBefore(wrapper, el);
    8. el.parentNode.removeChild(el);
    9. wrapper.appendChild(el);
    10. });
  • 3.12 unwrap

    移除被选元素的父元素的DOM结构

    1. // jQuery
    2. $('.inner').unwrap();
    3. // Native
    4. Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
    5. let elParentNode = el.parentNode
    6. if(elParentNode !== document.body) {
    7. elParentNode.parentNode.insertBefore(el, elParentNode)
    8. elParentNode.parentNode.removeChild(elParentNode)
    9. }
    10. });
  • 3.13 replaceWith

    用指定的元素替换被选的元素

    1. //jQuery
    2. $('.inner').replaceWith('<div class="outer"></div>');
    3. //Native
    4. Array.prototype.forEach.call(document.querySelectorAll('.inner'),(el) => {
    5. const outer = document.createElement("div");
    6. outer.className = "outer";
    7. el.parentNode.insertBefore(outer, el);
    8. el.parentNode.removeChild(el);
    9. });
  • 3.14 simple parse

    解析 HTML/SVG/XML 字符串

    1. // jQuery
    2. $(`<ol>
    3. <li>a</li>
    4. <li>b</li>
    5. </ol>
    6. <ol>
    7. <li>c</li>
    8. <li>d</li>
    9. </ol>`);
    10. // Native
    11. range = document.createRange();
    12. parse = range.createContextualFragment.bind(range);
    13. parse(`<ol>
    14. <li>a</li>
    15. <li>b</li>
    16. </ol>
    17. <ol>
    18. <li>c</li>
    19. <li>d</li>
    20. </ol>`);