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>');
