用 JS 原生方法实现 jQuery 的 append, prepend, before, afte
jquery append, prepend, before, afte
2022-05-09 11:18:27
JavaScript
104
相当于 $(el).before('html' | element)

el.insertAdjacentHTML('beforeBegin', 'html');
el.insertAdjacentElement('beforebegin', element)
相当于 $(el).prepend('html' | element)

el.insertAdjacentHTML('afterBegin', 'html');
el.insertBefore(element, el.firstChild)
相当于 $(el).append('html' | element)

el.insertAdjacentHTML('beforeEnd', 'html');
el.appendChild(element)
相当于 $(el).after('html' | element)

el.insertAdjacentHTML('afterEnd', 'html');
el.insertAdjacentElement('afterend', element)
相当于 $(el).addClass(className)

el.classList.add(className)
相当于 $(el).removeClass(className)

el.classList.remove(className)
相当于 $(el).toggleClass(className)

el.classList.toggle(className)
相当于 $(el).offset()

var rect = el.getBoundingClientRect();

{
  top: rect.top + document.body.scrollTop,
  left: rect.left + document.body.scrollLeft
}
相当于 $(el).remove()

el.parentNode.removeChild(el)
相当于 $(el).on(eventName, eventHandler)

el.addEventListener(eventName, eventHandler)
相当于 $(el).off(eventName, eventHandler)

el.removeEventListener(eventName, eventHandler)
相当于 $(document).on(eventName, elementSelector, handler)

document.addEventListener(eventName, function(e) {
    const handler = function(e) {
        console.log(this)
        console.log(e)
    }
    for (var target = e.target; target && target != this; target = target.parentNode) {
        if (target.matches(elementSelector)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

来源:oschina

链接:https://my.oschina.net/u/4395239/blog/4940968