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

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

本节书摘来自异步社区《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节点及其子节点。

相关文章
|
1月前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
1月前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
29 0
|
4天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
12 0
|
7天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
10天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
10天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
11天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
26天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
12 1
|
26天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
使用JavaScript的`createElement`, `createTextNode`和`appendChild`方法可动态创建并插入元素。
14 2
|
29天前
|
JavaScript 前端开发