3. DOM Manipulation

DOM Manipulation

• 3.1 Remove

  从 DOM 中移除元素。

  // jQuery
  $el.remove();
  // Native
  el.parentNode.removeChild(el);

• 3.2 Text

  • Get text

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

    // jQuery
    $el.text();
    // Native
    el.textContent;

  • Set text

    设置元素的文本内容。

    // jQuery
    $el.text(string);
    // Native
    el.textContent = string;

• 3.3 HTML

  • Get HTML

    // jQuery
    $el.html();
    // Native
    el.innerHTML;

  • Set HTML

    // jQuery
    $el.html(htmlString);
    // Native
    el.innerHTML = htmlString;

• 3.4 Append

  Append 插入到子节点的末尾

  // jQuery
  $el.append("<div id='container'>hello</div>");
  // Native (HTML string)
  el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
  // Native (Element)
  el.appendChild(newEl);

• 3.5 Prepend

  // jQuery
  $el.prepend("<div id='container'>hello</div>");
  // Native (HTML string)
  el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
  // Native (Element)
  el.insertBefore(newEl, el.firstChild);

• 3.6 insertBefore

  在选中元素前插入新节点

  // jQuery
  $newEl.insertBefore(queryString);
  // Native (HTML string)
  el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
  // 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', '<div id="container">Hello World</div>');
  // 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();
  //Native
  el.cloneNode();
  //深拷贝添加参数‘true’

• 3.10 empty

  移除所有子节点

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

• 3.11 wrap

  把每个被选元素放置在指定的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);
  });

• 3.12 unwrap

  移除被选元素的父元素的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)
        }
  });

• 3.13 replaceWith

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

  //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);
  });

• 3.14 simple parse

  解析 HTML/SVG/XML 字符串

  // jQuery
  $(`<ol>
    <li>a</li>
    <li>b</li>
  </ol>
  <ol>
    <li>c</li>
    <li>d</li>
  </ol>`);
  // Native
  range = document.createRange();
  parse = range.createContextualFragment.bind(range);
  parse(`<ol>
    <li>a</li>
    <li>b</li>
  </ol>
  <ol>
    <li>c</li>
    <li>d</li>
  </ol>`);