jQuery DOM operations replaceWith() and replaceAll()

Before, we learned the inner insertion, outer insertion and deletion methods of nodes. In this section, we will learn the replacement method replaceWith

.replaceWith(newContent): replace all matching elements in the collection with the provided content and return the Delete a collection of elements

Simply put: use $() to select node A, call the replaceWith method, and pass in a new content B (HTML string, DOM element, or jQuery object) to replace the selected Node A

Look at a simple example: a piece of HTML code

Replace the nodes and content of the second paragraph

$("p:eq(1)").replaceWith('Replace the content of the second paragraph')

Filter out the second p element through jQuery and call replaceWith to replace it. The result is as follows

.replaceAll( target ): Replace each target element with the matching element of the collection

.replaceAll() and .replaceWith() have similar functions, but the target and source are opposite. Use the above HTML structure, we use replaceAll to process

$('replace the content of the second paragraph').replaceAll('p:eq( 1)')

Summary:

replaceAll() and .replaceWith() have similar functions, the main difference is the location of the target and source

replaceWith() and The .replaceAll() method will delete all data and event handlers associated with the node

The replaceWith() method, like most other jQuery methods, returns a jQuery object, so it can be chained with other methods

The jQuery object returned by the replaceWith() method refers to the node before replacement, not the node after replacement through the replaceWith/replaceAll method

Look at the following example:

       
  
replaceWith()和replaceAll()
 
 点击,通过replaceWith替换内容 点击,通过rreplaceAll替换内容 
 
 
 
第一段
 
第二段
 
第三段
 
 
 
第四段
 
第五段
 
第六段