Content API

html()

Sets or gets the HTML or XML markup of the child elements within the matched DOM elements.

  • Accepts an argument as a string and an optional second argument, which can be one of the following:
    Argument
    Description
    'before'
    Places the HTML or XML markup before the matched DOM element (before the opening tag).
    'after'
    Places the HTML or XML markup after the matched DOM element (after the closing tag).
    'begin'
    Places the HTML or XML markup immediately after the matched DOM element's opening tag (before the first child).
    'end'
    Places the HTML or XML markup right before the matched DOM element's closing tag (after the last child).
  • If the second argument is specified, DOM elements with the "data-remove" attribute matching existing DOM elements will be removed.
    This is useful for scenarios such as adding new content and removing outdated elements, like replacing old pagination with updated content.
  • If no arguments are passed, it returns a string if a single matched DOM element, and an array of strings if multiple matched DOM elements.
Example: 
$('div').html('');
$('div').html(null);
// Removes the HTML or XML markup from the <div> element.

$('div ?').html('');
$('div ?').html(null);
// Removes the HTML or XML markup from all <div> elements.

$('div ?').html('<span>cat</span>');
// <div><span>cat</span></div>
// <div><span>cat</span></div>
// <div><span>cat</span></div>

$('div').html('<span>book</span>');
// <div><span>book</span></div>
// <div><span>cat</span></div>
// <div><span>cat</span></div>

$('div').html();
// '<span>book</span>'

$('div ?').html();
// ['<span>book</span>', '<span>cat</span>', '<span>cat</span>']

$('div').html('<b>cat</b>', 'before');
// <b>cat</b>
// <div><span>book</span></div>
// <div><span>cat</span></div>
// <div><span>cat</span></div>

$('div').html('<b>cat</b>', 'after');
// <div><span>book</span></div>
// <b>cat</b>
// <div><span>cat</span></div>
// <div><span>cat</span></div>

$('div').html('<b>cat</b>', 'begin');
// <div><b>cat</b><span>book</span></div>
// <div><span>cat</span></div>
// <div><span>cat</span></div>

$('div').html('<b>cat</b>', 'end');
// <div><span>book</span><b>cat</b></div>
// <div><span>cat</span></div>
// <div><span>cat</span></div>
Previous Overview Next outHtml()