当前位置：首页 > JavaScript

js 实现append()

2026-03-02 07:25:11JavaScript

实现 append() 方法

在 JavaScript 中，可以通过多种方式实现类似 append() 的功能，用于向 DOM 元素添加内容。以下是几种常见的方法：

使用原生 DOM 方法

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

使用 innerHTML

const parentElement = document.getElementById('parent');
parentElement.innerHTML += '<div>New content</div>';

使用 insertAdjacentHTML

const parentElement = document.getElementById('parent');
parentElement.insertAdjacentHTML('beforeend', '<div>New content</div>');

使用 jQuery

如果项目中引入了 jQuery，可以使用其提供的 append() 方法：

$('#parent').append('<div>New content</div>');

使用现代框架（如 React）

在 React 中，通常通过状态管理来实现动态内容添加：

function ParentComponent() {
  const [items, setItems] = useState([]);

  const appendItem = () => {
    setItems([...items, 'New content']);
  };

  return (
    <div>
      <button onClick={appendItem}>Append</button>
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

性能考虑

对于频繁的 DOM 操作，推荐使用 DocumentFragment 来批量添加元素：

js 实现append()

const parentElement = document.getElementById('parent');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const newElement = document.createElement('div');
  newElement.textContent = `Item ${i}`;
  fragment.appendChild(newElement);
}

parentElement.appendChild(fragment);

以上方法涵盖了从原生 JavaScript 到现代框架的实现方式，可以根据具体需求选择合适的方法。