jQuery replaceWith() 方法详解与实例

jQuery replaceWith() 方法概述

本文通过具体示例解析jQuery中replaceWith()方法的使用方式，供读者参考学习。

该方法的功能是将所有匹配到的元素替换为指定的HTML代码或DOM元素。

需注意，此操作并非追加内容，而是直接替换原有内容，原元素将被移除。

特别说明：

HTML内容指包含HTML标签且可由浏览器直接渲染的字符串；文本内容则会将HTML预定义字符转换为实体字符，从而避免标签被渲染。

语法与参数说明

语法结构如下：

$(selector).replaceWith(content)

参数列表：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>本站</title>
<style type="text/css">
div{
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("<div>我是div元素</div>");
  }); 
}); 
</script>
</head>
<body>
<p>我是p元素</p>
<p>我是p元素</p>
<p>我是p元素</p>
<button>用div包裹每个段落</button>
</body>
</html>

上述代码实现了将p元素替换为div元素的功能。

希望本文所述对大家的jQuery程序设计有所帮助。