Element 元素

新增

1. 通过 append(...nodes) 方法新增子元素

新增的元素位于子元素列表的末尾处。

HTML 模板内容：

<div class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
</div>

执行这段 JavaScript 代码：

const container = document.querySelector('.container');
const item3 = document.createElement('div');
item3.className = 'item3';
item3.innerHTML = 'item3';
if (container) {
  container.append(item3);
}

运行结果：

<div id="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <!-- 新增的元素 -->
  <div class="item3"></div>
</div>

2. 通过 afer() 方法新增一个兄弟元素

新增完成后，新增的元素会在当前元素之后。

HTML 模板文件内容：

<div class="container">
  <div class="item1">item1</div>
</div>

执行下面这段 JavaScript 代码：

const item1 = document.querySelector('.item1');
const item2 = document.createElement('div');
item2.className = 'item2';
item2.innerHTML = 'item2';
item1.after(item2);

运行结果如下：

<div class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
</div>

3. 通过 prepend() 方法新增一个子元素

新增完成后，新增的元素会在当前元素的子元素列表的第一个。

删除

1. 通过 remove() 方法删除自身及其子元素

const el = document.querySelector('#my-node');
el.remove();

需要注意的是，remove() 方法在 with 语句中不可用

with (el) {
  // 执行会报错。ReferenceError: remove is not defind
  el.remove();
}

修改

1. 修改文本内容

• innerText 非标准属性，用于设置标签的文本内容，不包含 HTML 标签，如 element.innerText = "text";
• innerHTML 标准属性，可以包含 HTML 标签，如 element.innerHTML = <span>text</span>

2. 修改元素属性

查询

1. 通过 document.getElementById(id) 方法

代码示例：

<div>
  <input id="username-input" placeholder="请输入" />
</div>

// 查找输入框，需要注意的是 id 参数不需要以 # 号开头
const input = document.getElementById('username-input');
// 如果输入框存在，则使输入框获取焦点。
if (input) {
  input.focus();
}

2. 通过 document.querySelector(selector) 方法

该方法使得我们可以通过选择器去查询一个元素，该方法会通过深度优先遍历，返回第一个匹配到的元素。

如果你希望匹配多个元素，那么你可以使用 document.querySelectorAll() 方法去查询。