DOM Elements API

$.insert()

async

Inserts a DOM element at a specified position in the document relative to another DOM element.

  • Accepts a DOM element, relative to which another DOM element or a collection of such elements (array, NodeList, or HTMLCollection) should be positioned, as the first argument.
    Accepts a DOM element to be inserted at the specified position as the second argument.
    Accepts an optional third argument, which can be one of the following:
    Argument
    Description
    'before'
    Places the second DOM element before the first DOM element (before its opening tag).
    'after'
    Places the second DOM element after the first DOM element (after the closing tag).
    This is the default value.
    'begin'
    Places the second DOM element immediately after the first DOM element's opening tag (before the first child).
    'end'
    Places the second DOM element right before the first DOM element's closing tag (after the last child).
    Accepts an optional fourth argument as a boolean value (true or false):
    Argument
    Description
    true
    Moves the second DOM element without duplicating it.
    false
    Duplicates the second DOM element, leaving the original in place.
    This is the default value.
  • Returns the added DOM element if the first argument is a DOM element.
    Returns an array of the added DOM elements if the first argument is an array of DOM elements.
    Returns false if the DOM element cannot be inserted.
  • It is not necessary to wait for the method to be executed using await if not needed.
Example: 
await $.insert($('div'), $('span'));
// Inserts the <span> element at the end of the <div> element.
// <span>

await $.insert($('div ?'), $('span'));
// Inserts the <span> element at the end of each <div> element.
// [<span>, <span>, <span>]

await $.insert($('div'), $('span'), 'after', true);
// Moves the <span> element to the beginning of the <div> element without duplicating it.
// <span>

await $.insert($('div ?'), $('span'), 'after', true);
// Inserts the <span> element at the beginning of all <div> elements, and then removes it afterward.
// [<span>, <span>, <span>]
Previous $.create() Next $.replace()