jQuery

jQuery provides methods for adding content inside or outside of elements.

The content parameter can be a HTML string, a DOM element, a text node, another jQuery object, or an array with content.

The func parameter specifies a callback function that returns content for each element and has two arguments:

  • index - index of the current element (you can use the this keyword to access it)
  • oldValue - string with old value

Some methods treat a selected elements as content and add it to the target parameter, which can be a CSS selector, DOM element, array of DOM elements, HTML string, or jQuery object.

var newDiv1 = jQuery('<div/>', {
    id: "div1",
    "class": "w-50",
    title: 'now this div has a title!'
});

$('<div id="div2" class="w-50" title="some text"> ... </div>')
     .append("<p>dd</p>")
     .appendTo($('body'));
    
console.log($('body').html());

if (pTags.parent().is( "div" )) {
    pTags.unwrap();
} else { // <p>...</p> -> <div><p>...</p></div>
    pTags.wrap( "<div></div>" );
}
method description
after(content [,content]) Inserts contents after each element.
after(func) Inserts contents after each element.
insertAfter(target) Inserts every element after the target.
before(content [,content]) Inserts contents before each element.
before(func) Inserts contents before each element.
insertBefore(target) Inserts every element before the target.
html(str | func) Sets the HTML content of each element.
text(str | func) Sets the content of each element to the specified text.
append(content [,content]) Inserts content to the end of each element.
append(func) Inserts content to the end of each element.
appendTo(target) Inserts every element to the end of the target.
prepend(content [,content]) Inserts content to the beginning of each element.
prepend(func) Inserts content to the beginning of each element.
prependTo(target) Insert every element to the beginning of the target.
detach([sel])

Removes all or filtered elements from the DOM. It keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

The sel parameter is a CSS selector that filters elements to be removed.
empty() Removes all child nodes of each element from the DOM.
remove([sel])

Removes all or filtered elements from the DOM. All bound events and jQuery data associated with the elements are removed.

The sel parameter is a CSS selector that filters elements to be removed.
unwarp([sel])

Removes the parents of elements from the DOM, leaving the elements in their place.

The sel parameter specifies is used to check the parent element against. If an element's parent does not match the selector, the element won't be unwrapped. It can be a HTML string like "<div></div>".

wrap(w | func)

Wrap an HTML structure around each element. Elements must be in DOM. In other words, when you create a jQuery object from an HTML string, you must add it to the DOM and then wrap it.

The func is function that returns the HTML content or jQuery object to wrap around the matched elements and has single argument:

  • index - index of the current element (you can use the this keyword to access it)
wrapAll(w | func)

Wraps an HTML structure around all elements.

The func is function that returns the HTML string or jQuery object. Within the function, the this keyword refers to the first element.
wrapInner(wContent | func)

Wraps an HTML structure around the content of each element.

The func is function that returns the HTML string and has one argument:

  • index - index of the current element (you can use the this keyword to access it)
replaceAll(target) Replaces each target element with the set of matched elements.
replaceWith(newContent | func) Replaces each element with the provided new content and return the set of elements that was removed.