append vs appendChild

append和appendChild都用于在DOM中添加新的元素,区别如下:

  1. append传参可以为DOMString和Node节点,appendChild传参只能为Node节点
// 1. append传Node节点
const parent = document.createElement('div');
const child = document.createElement('p');
parent.append(child);

// 2. append传文本,被插入的 DOMString对象等价为 Text 节点
const parent = document.createElement('div');
parent.append('Appending Text');

// 3. appendChild传Node节点
const parent = document.createElement('div');
const child = document.createElement('p');
parent.appendChild(child);

// 4. 报错:appendChild传文本
const parent = document.createElement('div');
parent.appendChild('Appending Text');
appendChild不支持传字符串

2. append没有返回值,appendChild返回被创建的Node节点

const parent = document.createElement('div');
const child = document.createElement('p');
const appendValue = parent.append(child);
console.log(appendValue) // undefined

const appendChildValue = parent.appendChild(child);
console.log(appendChildValue) // <p><p>

3. append可以同时添加多个元素,appendChild同时只能添加一个

const parent = document.createElement('div');
const child = document.createElement('p');
const childTwo = document.createElement('p');
parent.append(child, childTwo, 'Hello world'); // Works fine

parent.appendChild(child, childTwo, 'Hello world');
// Works fine, but adds the first element and ignores the rest

4. 浏览器兼容区别,appendChild在各浏览器中兼容性较好

其他:DOMString是一个UTF-16字符串。由于JavaScript已经使用了这样的字符串,所以DOMString 直接映射到 一个String

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注