修改 DOM 结构

Mr.Hope ... 2019-11-03 JQuery 大约 2 分钟

章节过时

而且目前浏览器 API 已经基本统一,除非兼容旧版本 IE,否则无需针对不同浏览器写不同的代码。

直接使用浏览器提供的 API 对 DOM 结构进行修改,不但代码复杂,而且要针对浏览器写不同的代码。

有了 jQuery,我们就专注于操作 jQuery 对象本身,底层的 DOM 操作由 jQuery 完成就可以了,这样一来,修改 DOM 也大大简化了。

# 添加 DOM

要添加新的 DOM 节点,除了通过 jQuery 的 html() 这种暴力方法外,还可以用 append() 方法,例如:

<div id="test-div">
  <ul>
    <li><span>JavaScript</span></li>
    <li><span>Python</span></li>
    <li><span>Swift</span></li>
  </ul>
</div>
1
2
3
4
5
6
7

如何向列表新增一个语言?首先要拿到 <ul> 节点:

const ul = $("#test-div>ul");
1

然后,调用 append() 传入 HTML 片段:

ul.append("<li><span>Haskell</span></li>");
1

除了接受字符串,append() 还可以传入原始的 DOM 对象,jQuery 对象和函数对象:

// 创建DOM对象:
const ps = document.createElement("li");
ps.innerHTML = "<span>Pascal</span>";
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($("#scheme"));

// 添加函数对象:
ul.append(function (index, html) {
  return "<li><span>Language - " + index + "</span></li>";
});
1
2
3
4
5
6
7
8
9
10
11
12
13

传入函数时,要求返回一个字符串、DOM 对象或者 jQuery 对象。因为 jQuery 的 append() 可能作用于一组 DOM 节点,只有传入函数才能针对每个 DOM 生成不同的子节点。

append() 把 DOM 添加到最后,prepend() 则把 DOM 添加到最前。

另外注意,如果要添加的 DOM 节点已经存在于 HTML 文档中,它会首先从文档移除,然后再添加,也就是说,用 append(),您可以移动一个 DOM 节点。

如果要把新节点插入到指定位置,例如,JavaScript 和 Python 之间,那么,可以先定位到 JavaScript,然后用 after() 方法:

const js = $("#test-div>ul>li:first-child");
js.after("<li><span>Lua</span></li>");
1
2

也就是说,同级节点可以用 after() 或者 before() 方法。

# 删除节点

要删除 DOM 节点,拿到 jQuery 对象后直接调用 remove() 方法就可以了。如果 jQuery 对象包含若干 DOM 节点,实际上可以一次删除多个 DOM 节点:

const li = $("#test-div>ul>li");
li.remove(); // 所有<li>全被删除
1
2