js实现追加

追加元素到DOM

使用appendChild()方法将新节点添加到指定父节点的子节点列表末尾

const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'New element';
parent.appendChild(newElement);

插入HTML字符串

通过insertAdjacentHTML()方法在指定位置插入HTML字符串

const container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', '<div>Appended content</div>');

批量追加多个元素

使用DocumentFragment提高性能后再一次性追加

const fragment = document.createDocumentFragment();
const list = document.getElementById('list');

for(let i = 0; i < 5; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i+1}`;
  fragment.appendChild(li);
}

list.appendChild(fragment);

数组追加元素

使用push()方法向数组末尾添加新元素

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]

使用展开运算符追加

合并数组时可以使用展开运算符

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

字符串追加

通过+=运算符或concat()方法连接字符串

let str = 'Hello';
str += ' World';
// 或
str = str.concat('!');

jQuery追加元素

使用jQuery的append()方法

$('#container').append('<p>New paragraph</p>');