Example

Replace the first p element with some bold text:

$("button").click(function(){
   $("p:first").replaceWith("<b>Hello world!</b>");
});

Try it yourself »

Definition and Usage

The replaceWith() method replaces selected elements with new content.

Tip: The replaceWith() and replaceAll() methods does the same thing. The difference is in the syntax: the placement of the content and selector, and that replaceWith() can replace content using a function.


Syntax

$(selector).replaceWith(content)

Parameter Description
content Required. Specifies the new content.

Possible values:
  • HTML code - like "<div>Hello world</div>"
  • New elements - like document.createElement("div")
  • Existing elements - like $(".div1")


Replace Elements Using a Function

Using a function to replace selected elements with new content.

Syntax

$(selector).replaceWith(function())
Try it yourself »

Parameter Description
function() Required. A function that returns the new content to replace the selected elements with


Examples

Try it Yourself - Examples

Replace elements with a new element
How to create a new DOM element, with document.createElement(), to replace the selected elements.