《jQuery Cookbook中文版》——1.12　替换DOM元素

最新推荐文章于 2024-06-13 14:36:30 发布

weixin_34279246

最新推荐文章于 2024-06-13 14:36:30 发布

阅读量71

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://yq.aliyun.com/articles/97804

版权

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.12节，作者：【美】jQuery社区专家组著，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.12　替换DOM元素

1.12.1　问题
你需要用新的DOM节点代替DOM中的现有节点。

1.12.2　解决方案
使用replaceWith()方法，可以选择一组DOM元素进行替换。在下面的代码示例中，使用replaceWith()方法，将class属性为remove的所有< li>元素替换为新的DOM结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<ul>
<li class='remove'>name</li>
<li>name</li>
<li class='remove'>name</li>
<li class='remove'>name</li>
<li>name</li>
<li class='remove'>name</li>
<li>name</li>
<li class='remove'>name</li>
</ul>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
　jQuery('li.remove').replaceWith('<li>removed</li>');
</script>
</body>
</html>

添加到DOM中的新DOM结构作为一个字符串参数传递给relaceWith()方法。在例子中，所有 < li>元素（包括子元素）都被新的结构< li>remove< /li>替代。

1.12.3　讨论
jQuery提供一个方向相反的方法replaceAll()，该方法的功能与relaceWith()方法相同，但是参数位置颠倒。例如，可以将本秘诀中的代码改写成：

jQuery('<li>removed</li>').replaceAll('li.remove');
这里将HTML字符串传递给jQuery函数，然后使用replaceAll()方法选择想要删除和替换的DOM节点及其子节点。

weixin_34279246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《jQuery Cookbook中文版》——1.12　替换DOM元素

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章，第1.12节，作者：【美】jQuery社区专家组著，更多章节内容可以访问云栖社区“异步社区”公众号查看1.12　替换DOM元素1.12.1　问题你需要用新的DOM节点代替DOM中的现有节点。1.12.2　解决方案使用replaceWith()方法，可以选择一组DOM元素进行...
复制链接

扫一扫