Home >Web Front-end >JS Tutorial >Usage examples of replaceWith() method in jQuery

Usage examples of replaceWith() method in jQuery

巴扎黑Original: 2017-06-24 14:21:031498browse

This article mainly introduces the usage of the replaceWith() method in jQuery, and analyzes the replacementWith() method for matching element replacement techniques in the form of examples. It has certain reference value. Friends in need You can refer to the following

The examples in this article describe the usage of the replaceWith() method in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

This method replaces all matching elements with specified HTML or DOM elements.

It should be noted that this method is to append content, that is, the original content is still there.

Special Note:

HTML content means that the content can contain HTML tags and can be rendered by the browser.
The text content is to first convert the HTML predefined characters in the content into htmlcharacter entities, so that the HTML tags will not be rendered.

Grammar structure:

The code is as follows:

$(selector).replaceWith(content)

Parameter list:

Parameters	Description
##content	Content used for replacement.
selector	is used to find the element to be replaced

Example code:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:100px;
  height:100px;
  border:1px solid blue;
}
p{
  width:150px;
  height:150px;
  border:1px solid red;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(
document
).ready(function(){ 
  $("button").click(function(){ 
    $("p").replaceWith("<p>我是p元素</p>"); 
  }); 
}); 
</script>
</head>
<body>
<p>我是p元素</p>
<p>我是p元素</p>
<p>我是p元素</p>
<button>用p包裹每个段落</button>
</body>
</html>

The above code can replace the p element with the p element.

The above is the detailed content of Usage examples of replaceWith() method in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of using jQuery tag replacement function replaceWith()Next article：Example of using jQuery tag replacement function replaceWith()

See more

Usage examples of replaceWith() method in jQuery

Related articles