DOM Manipulation

jQuery-compatible API with 90+ chainable methods for traversal, manipulation, events, and more.

Selectors

Select elements using CSS selectors, DOM elements, or HTML strings.

// CSS selector
$('.class')
$('#id')
$('div.container > p')

// DOM element
$(document.body)
$(element)

// HTML string
$('<div class="new">Content</div>')

// Collection from NodeList
$($('p'))

Try It

Try It
Item 1 Item 2 Item 3 Item 4
Click "Select" to see result 
<div class="flex gap-2 mb-4"><input type="text" id="selector-input" class="form-input" value=".demo-item" placeholder="Enter selector">
    <button type="button" class="btn btn-primary" id="selector-btn">Select</button>
</div>
<div class="flex gap-2 flex-wrap p-3 mb-3">
            <span class="demo-item badge badge-secondary">Item 1</span>
            <span class="demo-item badge badge-secondary">Item 2</span>
            <span class="demo-item special badge badge-secondary">Item 3</span>
            <span class="demo-item badge badge-secondary">Item 4</span>
            </div>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="selector-result">Click "Select" to
    see result
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
    $(root).find('#selector-btn').on('click', function () {
        const selector = $(root).find('#selector-input').val();
        try {
            const $els = $(root).find(selector);
            $(root).find('#selector-result').text(`Found ${$els.length} element(s) matching "${selector}"`);
            // Highlight selected elements briefly
            $els.addClass('bg-warning');
            setTimeout(() => $els.removeClass('bg-warning').addClass('bg-primary'), 1000);
        } catch (e) {
            $(root).find('#selector-result').text(`Error: ${e.message}`);
        }
    });
}

Context Parameter

Limit your search to a specific element for better performance and clarity.

// Search within specific container
const container = $('#container')[0];
$('li', container).addClass('highlight');

// Equivalent to chaining
$('#container').find('li').addClass('highlight');

// Performance benefit: searches smaller subset
$('.item', containerEl).css('color', 'blue');

Try It

Try It
Container 1
Item A Item B Item C
Container 2
Item X Item Y Item Z
Click buttons to see context-scoped selection 
<div id="context-demo-1" class="p-4 border rounded mb-2 bg-gray-50">
    <strong>Container 1</strong>
    <div class="mt-2">
        <span class="context-item badge badge-secondary mr-2">Item A</span>
        <span class="context-item badge badge-secondary mr-2">Item B</span>
        <span class="context-item badge badge-secondary">Item C</span>
    </div>
</div>
<div id="context-demo-2" class="p-4 border rounded bg-gray-100">
    <strong>Container 2</strong>
    <div class="mt-2">
        <span class="context-item badge badge-secondary mr-2">Item X</span>
        <span class="context-item badge badge-secondary mr-2">Item Y</span>
        <span class="context-item badge badge-secondary">Item Z</span>
    </div>
</div>
<button type="button" class="btn btn-primary" id="context-btn-1">
    Highlight Container 1
</button>
<button type="button" class="btn btn-secondary" id="context-btn-2">
    Highlight Container 2
</button>
<button type="button" class="btn btn-outline" id="context-btn-reset">
    Reset
</button>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="context-result">
    Click buttons to see context-scoped selection
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // Context parameter demonstration
    $(root).find('#context-btn-1').on('click', function () {
            // Reset all badges first
            $('.context-item').removeClass('badge-primary').addClass('badge-secondary');

            // Select only within container 1 using context parameter
            const container1 = $(root).find('#context-demo-1')[0];
            $('.context-item', container1)
                .removeClass('badge-secondary')
                .addClass('badge-primary');

            $(root).find('#context-result')
                .text('Highlighted 3 items in Container 1 using: $(".context-item", container1)')
                .css('color', '#0066cc');
        });
    $(root).find('#context-btn-2').on('click', function () {
            // Reset all badges first
            $('.context-item').removeClass('badge-primary').addClass('badge-secondary');

            // Select only within container 2 using context parameter
            const container2 = $(root).find('#context-demo-2')[0];
            $('.context-item', container2)
                .removeClass('badge-secondary')
                .addClass('badge-primary');

            $(root).find('#context-result')
                .text('Highlighted 3 items in Container 2 using: $(".context-item", container2)')
                .css('color', '#0066cc');
        });
    $(root).find('#context-btn-reset').on('click', function () {
            $('.context-item').removeClass('badge-primary').addClass('badge-secondary');
            $(root).find('#context-result')
                .text('Click buttons to see context-scoped selection')
                .css('color', '');
        });
}

Traversal

Navigate the DOM tree with chainable methods.

find()

children()

parent()

parents()

closest()

siblings()

next()

prev()

nextAll()

prevAll()

first()

last()

eq()

filter()

not()

has()

is()

add()

contents()

offsetParent()

// Find descendants
$('#container').find('.item')

// Navigate up
$('.item').parent()
$('.item').closest('.container')
$('.item').parents('div')

// Siblings
$('.active').siblings()
$('.item').next()
$('.item').prev()

// Filtering
$('.items').filter('.active')
$('.items').not('.disabled')
$('.items').eq(2)  // Third element
$('.items').first()
$('.items').last()

Try It

Try It
Target
Sibling 1
Sibling 2
Sibling 3
Click a method to see result 
<button type="button" class="btn btn-outline btn-sm" data-traverse="parent">parent()</button>
<button type="button" class="btn btn-outline btn-sm" data-traverse="siblings">siblings()</button>
<button type="button" class="btn btn-outline btn-sm" data-traverse="next">next()</button>
<button type="button" class="btn btn-outline btn-sm" data-traverse="prev">prev()</button>
<button type="button" class="btn btn-outline btn-sm" data-traverse="first">first()</button>
<button type="button" class="btn btn-outline btn-sm" data-traverse="last">last()</button>
<div class="p-4 border rounded bg-gray-50 flex gap-2 flex-wrap" id="traverse-container">
    <div class="demo-item badge badge-success" id="traverse-target">Target</div>
    <div class="demo-item badge badge-primary">Sibling 1</div>
    <div class="demo-item badge badge-primary">Sibling 2</div>
    <div class="demo-item badge badge-primary">Sibling 3</div>
</div>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="traverse-result">Click a method to
    see result
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // Traversal demo
    $('[data-traverse]').on('click', function () {
            const method = $(this).data('traverse');
            const $target = $(root).find('#traverse-target');
            let $result;
            let description = '';

            switch (method) {
                case 'parent':
                    $result = $target.parent();
                    description = 'parent() - the container div';
                    break;
                case 'siblings':
                    $result = $target.siblings();
                    description = `siblings() - found ${$result.length} siblings`;
                    break;
                case 'next':
                    $result = $target.next();
                    description = 'next() - the next sibling';
                    break;
                case 'prev':
                    $result = $target.prev();
                    description = 'prev() - no previous sibling (target is first)';
                    break;
                case 'first':
                    $result = $('#traverse-container .demo-item').first();
                    description = 'first() - the first .demo-item';
                    break;
                case 'last':
                    $result = $('#traverse-container .demo-item').last();
                    description = 'last() - the last .demo-item';
                    break;
            }

            // Reset colors
            $('#traverse-container .demo-item').addClass('bg-primary').removeClass('bg-warning');
            $(root).find('#traverse-target').addClass('bg-success').removeClass('bg-primary');

            // Highlight result
            if ($result && $result.length) {
                $result.addClass('bg-warning');
            }
            $(root).find('#traverse-result').text(description);
        });
    const colors = ['var(--dm-primary)', 'var(--dm-success)', 'var(--dm-danger)', 'var(--dm-warning)'];
}

Content Manipulation

Get and set element content, attributes, and values.

html()

text()

val()

attr()

removeAttr()

prop()

removeProp()

data()

removeData()

// Get/set HTML content
$('#box').html()              // Get
$('#box').html('New')  // Set

// Get/set text content
$('#box').text()
$('#box').text('Plain text')

// Get/set form values
$('input').val()
$('input').val('New value')

// Attributes
$('img').attr('src')
$('img').attr('src', 'new.jpg')
$('img').attr({ src: 'img.jpg', alt: 'Image' })

// Data attributes
$('#el').data('id')          // data-id
$('#el').data('id', '123')

Try It

Try It
Hello World
Click a button to see result 
<button type="button" class="btn btn-outline btn-sm" id="get-html">Get html()</button>
<button type="button" class="btn btn-outline btn-sm" id="set-html">Set html()</button>
<button type="button" class="btn btn-outline btn-sm" id="get-text">Get text()</button>
<button type="button" class="btn btn-outline btn-sm" id="set-text">Set text()</button>
<div class="p-4 border rounded bg-gray-50" id="content-box">
    <strong>Hello</strong> <em>World</em>
</div>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="content-result">Click a button to
    see result
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // Content demo
    $(root).find('#get-html').on('click', function () {
            $(root).find('#content-result').text('html(): ' + $(root).find('#content-box').html());
        });
    $(root).find('#set-html').on('click', function () {
            $(root).find('#content-box').html('<u>Updated</u> <mark>HTML</mark>');
            $(root).find('#content-result').text('Set new HTML content');
        });
    $(root).find('#get-text').on('click', function () {
            $(root).find('#content-result').text('text(): ' + $(root).find('#content-box').text());
        });
    $(root).find('#set-text').on('click', function () {
            $(root).find('#content-box').text('Plain text only');
            $(root).find('#content-result').text('Set plain text (HTML escaped)');
        });
}

CSS & Classes

Manipulate styles and CSS classes.

css()

addClass()

removeClass()

toggleClass()

hasClass()

show()

hide()

toggle()

// Get/set CSS
$('#box').css('color')
$('#box').css('color', 'red')
$('#box').css({ color: 'red', fontSize: '16px' })

// Classes
$('#box').addClass('active')
$('#box').removeClass('active')
$('#box').toggleClass('active')
$('#box').hasClass('active')  // Returns boolean

// Visibility
$('#box').show()
$('#box').hide()
$('#box').toggle()

Try It

Try It
Style Me
Click a button to manipulate styles 
<button type="button" class="btn btn-outline btn-sm" id="toggle-class">toggleClass('special')</button>
<button type="button" class="btn btn-outline btn-sm" id="change-color">css('background')</button>
<button type="button" class="btn btn-outline btn-sm" id="toggle-vis">toggle()</button>
<div class="badge badge-primary" id="css-target">Style Me</div>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="css-result">Click a button to
    manipulate styles
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // CSS demo
    let colorIndex = 0;
    const colors = ['var(--dm-primary)', 'var(--dm-success)', 'var(--dm-danger)', 'var(--dm-warning)'];
    $(root).find('#toggle-class').on('click', function () {
            const $target = $(root).find('#css-target');
            $target.toggleClass('special');
            $(root).find('#css-result').text('hasClass("special"): ' + $target.hasClass('special'));
        });
    $(root).find('#change-color').on('click', function () {
            colorIndex = (colorIndex + 1) % colors.length;
            $(root).find('#css-target').css('background', colors[colorIndex]);
            $(root).find('#css-result').text('css("background") changed to: ' + colors[colorIndex]);
        });
    $(root).find('#toggle-vis').on('click', function () {
            $(root).find('#css-target').toggle();
        });
}

DOM Manipulation

Insert, replace, and remove elements.

append()

prepend()

after()

before()

appendTo()

prependTo()

insertAfter()

insertBefore()

wrap()

wrapAll()

wrapInner()

unwrap()

clone()

remove()

detach()

empty()

replaceWith()

replaceAll()

// Inserting content
$('#list').append('New item')
$('#list').prepend('First item')
$('#item').after('After')
$('#item').before('Before')

// Moving elements
$('New').appendTo('#list')

// Wrapping
$('.item').wrap('')
$('.item').unwrap()

// Removing
$('#item').remove()
$('#list').empty()

// Cloning
$('#item').clone()

Try It

Try It
Original 1 Original 2 
<button type="button" class="btn btn-outline btn-sm" id="dom-append">append()</button>
<button type="button" class="btn btn-outline btn-sm" id="dom-prepend">prepend()</button>
<button type="button" class="btn btn-outline btn-sm" id="dom-remove">remove() last</button>
<button type="button" class="btn btn-outline btn-sm" id="dom-empty">empty()</button>
<button type="button" class="btn btn-outline btn-sm" id="dom-reset">Reset</button>
<div class="p-4 border rounded bg-gray-50 flex gap-2 flex-wrap" id="dom-container">
    <span class="demo-item badge badge-secondary">Original 1</span>
    <span class="demo-item badge badge-secondary">Original 2</span>
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // DOM manipulation demo
    let itemCount = 2;
    // Every item has the same look, so remove() and Reset treat added items like the originals.
    const item = (text) => `<span class="demo-item badge badge-secondary">${text}</span>`;
    const originalHTML = item('Original 1') + item('Original 2');
    $(root).find('#dom-append').on('click', function () {
            itemCount++;
            $(root).find('#dom-container').append(item(`Appended ${itemCount}`));
        });
    $(root).find('#dom-prepend').on('click', function () {
            itemCount++;
            $(root).find('#dom-container').prepend(item(`Prepended ${itemCount}`));
        });
    $(root).find('#dom-remove').on('click', function () {
            $(root).find('#dom-container .demo-item').last().remove();
        });
    $(root).find('#dom-empty').on('click', function () {
            $(root).find('#dom-container').empty();
        });
    $(root).find('#dom-reset').on('click', function () {
            itemCount = 2;
            $(root).find('#dom-container').html(originalHTML);
        });
}

Events

Attach, trigger, and manage events.

on()

off()

one()

trigger()

click()

dblclick()

mouseenter()

mouseleave()

mouseover()

mouseout()

mousemove()

mousedown()

mouseup()

hover()

focus()

blur()

change()

submit()

keydown()

keyup()

keypress()

scroll()

resize()

// Basic event binding
$('#btn').on('click', function(e) {
    console.log('Clicked!', this);
});

// Event delegation
$('#list').on('click', '.item', handler);

// One-time event
$('#btn').one('click', handler);

// Remove events
$('#btn').off('click');
$('#btn').off('click', specificHandler);

// Trigger events
$('#btn').trigger('click');

// Shorthand methods
$('#btn').click(handler);
$('#input').focus(handler);
$('#form').submit(handler);

// Hover (mouseenter + mouseleave)
$('#box').hover(enterFn, leaveFn);

Try It

Try It
Hover Me
Interact with elements above 
<button type="button" class="btn btn-primary" id="event-btn">Click Me</button>
<button type="button" class="btn btn-secondary" id="event-trigger">Trigger Click</button>
<div class="badge badge-primary mt-4 cursor-pointer" id="event-hover">Hover Me</div>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="event-result">Interact with
    elements above
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // Events demo
    let clickCount = 0;
    $(root).find('#event-btn').on('click', function () {
            clickCount++;
            $(root).find('#event-result').text(`Button clicked ${clickCount} time(s)`);
        });
    $(root).find('#event-trigger').on('click', function () {
            $(root).find('#event-btn').trigger('click');
        });
    $(root).find('#event-hover').hover(
            function () {
                $(root).find('#event-result').text('Mouse entered!');
                $(this).addClass('bg-success').removeClass('bg-primary');
            },
            function () {
                $(root).find('#event-result').text('Mouse left!');
                $(this).addClass('bg-primary').removeClass('bg-success');
            }
        );
}

Effects & Animation

Animate elements with built-in effects.

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

slideDown()

slideUp()

slideToggle()

animate()

stop()

delay()

// Fade effects
$('#box').fadeIn(400)
$('#box').fadeOut(400)
$('#box').fadeToggle()
$('#box').fadeTo(400, 0.5)  // Fade to 50% opacity

// Slide effects
$('#box').slideDown(400)
$('#box').slideUp(400)
$('#box').slideToggle()

// Custom animation
$('#box').animate({
    opacity: 0.5,
    marginLeft: '100px'
}, 500)

// Chained animations with delay
$('#box')
    .fadeOut(200)
    .delay(500)
    .fadeIn(200)

Try It

Try It
Animate
<button type="button" class="btn btn-outline btn-sm" id="fx-fade">fadeToggle()</button>
<button type="button" class="btn btn-outline btn-sm" id="fx-slide">slideToggle()</button>
<button type="button" class="btn btn-outline btn-sm" id="fx-animate">animate()</button>
<div class="badge badge-primary" id="fx-target">Animate</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // Effects demo
    $(root).find('#fx-fade').on('click', function () {
            $(root).find('#fx-target').fadeToggle(400);
        });
    $(root).find('#fx-slide').on('click', function () {
            $(root).find('#fx-target').slideToggle(400);
        });
    $(root).find('#fx-animate').on('click', function () {
            const $target = $(root).find('#fx-target');
            const currentMargin = parseInt($target.css('marginLeft'), 10) || 0;
            $target.animate({
                marginLeft: currentMargin > 100 ? '0px' : '200px',
                opacity: currentMargin > 100 ? 1 : 0.5
            }, 500);
        });
}

Dimensions & Position

Get and set element dimensions and position.

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

offset()

position()

scrollTop()

scrollLeft()

// Dimensions
$('#box').width()              // Content width
$('#box').width(200)           // Set width
$('#box').height()
$('#box').innerWidth()         // Including padding
$('#box').outerWidth()         // Including padding + border
$('#box').outerWidth(true)     // Including margin

// Position
$('#box').offset()             // { top, left } relative to document
$('#box').position()           // { top, left } relative to offset parent

// Scroll
$(window).scrollTop()
$(window).scrollTop(0)         // Scroll to top
$('#box').scrollLeft()

Try It

Try It
Measure Me
Click button to measure the box 
<button type="button" class="btn btn-primary mb-4" id="dim-btn">Get Dimensions</button>
<div class="p-4 border rounded bg-gray-50" id="dim-target">
    Measure Me
</div>
<div class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded text-sm" id="dim-result">Click button to
    measure the box
</div>
/**
 * Try It - from public/showcase/dom.
 */
export function mount(root) {
        // Dimensions demo
    $(root).find('#dim-btn').on('click', function () {
            const $box = $(root).find('#dim-target');
            const dims = {
                'width()': $box.width(),
                'height()': $box.height(),
                'innerWidth()': $box.innerWidth(),
                'innerHeight()': $box.innerHeight(),
                'outerWidth()': $box.outerWidth(),
                'outerHeight()': $box.outerHeight(),
                'outerWidth(true)': $box.outerWidth(true),
                'offset()': JSON.stringify($box.offset())
            };
            $(root).find('#dim-result').html(Object.entries(dims).map(([k, v]) => `${k}: ${v}`).join('<br>'));
        });
}

Collection Utilities

Iterate and work with element collections.

each()

get()

index()

toArray()

length

// Iterate
$('.items').each(function(index, element) {
    console.log(index, $(this).text());
});

// Map to values
const texts = $('.items').map(function() {
    return $(this).text();
}).toArray();

// Get raw elements
$('.items').get()     // All elements as array
$('.items').get(0)    // First element
$('.items')[0]        // Same as get(0)

// Index
$('.items').index($('.active'))  // Position of element

// Length
$('.items').length    // Number of elements

Complete Method Reference

All 90+ methods available in the DOM namespace.

Complete Method Reference

Navigate the DOM tree to find related elements (20 methods).

find() children() parent() parents() parentsUntil() closest() siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() first() last() eq() filter() not() has() is()

Get and set element content and attributes (9 methods).

html() text() val() attr() removeAttr() prop() removeProp() data() removeData()

Manipulate styles and CSS classes (8 methods).

css() addClass() removeClass() toggleClass() hasClass() show() hide() toggle()

Insert, move, copy and remove DOM elements (14 methods).

append() prepend() after() before() appendTo() prependTo() insertAfter() insertBefore() wrap() wrapAll() wrapInner() unwrap() clone() remove()

Attach, remove and trigger event handlers (24 methods).

on() off() one() trigger() click() dblclick() mouseenter() mouseleave() mouseover() mouseout() mousemove() mousedown() mouseup() hover() focus() blur() change() submit() keydown() keyup() keypress() scroll() resize() load()

Animate elements with fades, slides and custom animations (10 methods).

fadeIn() fadeOut() fadeToggle() fadeTo() slideDown() slideUp() slideToggle() animate() stop() delay()

Get and set element dimensions and positions (10 methods).

width() height() innerWidth() innerHeight() outerWidth() outerHeight() offset() position() scrollTop() scrollLeft() 
<div id="dom-method-tabs" class="tabs">
    <div class="tab-list">
        <button type="button" class="tab-item active" data-tab="traversal">Traversal</button>
        <button type="button" class="tab-item" data-tab="content">Content</button>
        <button type="button" class="tab-item" data-tab="css">CSS &amp; Classes</button>
        <button type="button" class="tab-item" data-tab="manipulation">Manipulation</button>
        <button type="button" class="tab-item" data-tab="events">Events</button>
        <button type="button" class="tab-item" data-tab="effects">Effects</button>
        <button type="button" class="tab-item" data-tab="dimensions">Dimensions</button>
    </div>
    <div class="tab-content">
        <div class="tab-panel active" role="tabpanel" data-tab="traversal">
            <p class="text-muted mb-3">Navigate the DOM tree to find related elements (20 methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">find()</span>
                <span class="method-item-style">children()</span>
                <span class="method-item-style">parent()</span>
                <span class="method-item-style">parents()</span>
                <span class="method-item-style">parentsUntil()</span>
                <span class="method-item-style">closest()</span>
                <span class="method-item-style">siblings()</span>
                <span class="method-item-style">next()</span>
                <span class="method-item-style">nextAll()</span>
                <span class="method-item-style">nextUntil()</span>
                <span class="method-item-style">prev()</span>
                <span class="method-item-style">prevAll()</span>
                <span class="method-item-style">prevUntil()</span>
                <span class="method-item-style">first()</span>
                <span class="method-item-style">last()</span>
                <span class="method-item-style">eq()</span>
                <span class="method-item-style">filter()</span>
                <span class="method-item-style">not()</span>
                <span class="method-item-style">has()</span>
                <span class="method-item-style">is()</span>
            </div>
        </div>
        <div class="tab-panel" role="tabpanel" data-tab="content">
            <p class="text-muted mb-3">Get and set element content and attributes (9 methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">html()</span>
                <span class="method-item-style">text()</span>
                <span class="method-item-style">val()</span>
                <span class="method-item-style">attr()</span>
                <span class="method-item-style">removeAttr()</span>
                <span class="method-item-style">prop()</span>
                <span class="method-item-style">removeProp()</span>
                <span class="method-item-style">data()</span>
                <span class="method-item-style">removeData()</span>
            </div>
        </div>
        <div class="tab-panel" role="tabpanel" data-tab="css">
            <p class="text-muted mb-3">Manipulate styles and CSS classes (8 methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">css()</span>
                <span class="method-item-style">addClass()</span>
                <span class="method-item-style">removeClass()</span>
                <span class="method-item-style">toggleClass()</span>
                <span class="method-item-style">hasClass()</span>
                <span class="method-item-style">show()</span>
                <span class="method-item-style">hide()</span>
                <span class="method-item-style">toggle()</span>
            </div>
        </div>
        <div class="tab-panel" role="tabpanel" data-tab="manipulation">
            <p class="text-muted mb-3">Insert, move, copy and remove DOM elements (14 methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">append()</span>
                <span class="method-item-style">prepend()</span>
                <span class="method-item-style">after()</span>
                <span class="method-item-style">before()</span>
                <span class="method-item-style">appendTo()</span>
                <span class="method-item-style">prependTo()</span>
                <span class="method-item-style">insertAfter()</span>
                <span class="method-item-style">insertBefore()</span>
                <span class="method-item-style">wrap()</span>
                <span class="method-item-style">wrapAll()</span>
                <span class="method-item-style">wrapInner()</span>
                <span class="method-item-style">unwrap()</span>
                <span class="method-item-style">clone()</span>
                <span class="method-item-style">remove()</span>
            </div>
        </div>
        <div class="tab-panel" role="tabpanel" data-tab="events">
            <p class="text-muted mb-3">Attach, remove and trigger event handlers (24 methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">on()</span>
                <span class="method-item-style">off()</span>
                <span class="method-item-style">one()</span>
                <span class="method-item-style">trigger()</span>
                <span class="method-item-style">click()</span>
                <span class="method-item-style">dblclick()</span>
                <span class="method-item-style">mouseenter()</span>
                <span class="method-item-style">mouseleave()</span>
                <span class="method-item-style">mouseover()</span>
                <span class="method-item-style">mouseout()</span>
                <span class="method-item-style">mousemove()</span>
                <span class="method-item-style">mousedown()</span>
                <span class="method-item-style">mouseup()</span>
                <span class="method-item-style">hover()</span>
                <span class="method-item-style">focus()</span>
                <span class="method-item-style">blur()</span>
                <span class="method-item-style">change()</span>
                <span class="method-item-style">submit()</span>
                <span class="method-item-style">keydown()</span>
                <span class="method-item-style">keyup()</span>
                <span class="method-item-style">keypress()</span>
                <span class="method-item-style">scroll()</span>
                <span class="method-item-style">resize()</span>
                <span class="method-item-style">load()</span>
            </div>
        </div>
        <div class="tab-panel" role="tabpanel" data-tab="effects">
            <p class="text-muted mb-3">Animate elements with fades, slides and custom animations (10
                methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">fadeIn()</span>
                <span class="method-item-style">fadeOut()</span>
                <span class="method-item-style">fadeToggle()</span>
                <span class="method-item-style">fadeTo()</span>
                <span class="method-item-style">slideDown()</span>
                <span class="method-item-style">slideUp()</span>
                <span class="method-item-style">slideToggle()</span>
                <span class="method-item-style">animate()</span>
                <span class="method-item-style">stop()</span>
                <span class="method-item-style">delay()</span>
            </div>
        </div>
        <div class="tab-panel" role="tabpanel" data-tab="dimensions">
            <p class="text-muted mb-3">Get and set element dimensions and positions (10 methods).</p>
            <div class="method-grid-style">
                <span class="method-item-style">width()</span>
                <span class="method-item-style">height()</span>
                <span class="method-item-style">innerWidth()</span>
                <span class="method-item-style">innerHeight()</span>
                <span class="method-item-style">outerWidth()</span>
                <span class="method-item-style">outerHeight()</span>
                <span class="method-item-style">offset()</span>
                <span class="method-item-style">position()</span>
                <span class="method-item-style">scrollTop()</span>
                <span class="method-item-style">scrollLeft()</span>
            </div>
        </div>
    </div>
</div>
/**
 * Complete Method Reference - from public/showcase/dom.
 */
export function mount(root) {
        // Method Reference Tabs
    E.tabs(root.querySelector('#dom-method-tabs'), {animation: true});
}