当前位置：首页 > JavaScript

js实现节点

2026-04-06 17:43:56JavaScript

使用 JavaScript 创建 DOM 节点

JavaScript 提供了多种方法来创建和操作 DOM 节点。以下是常见的几种方式：

1. 使用 document.createElement()

const divElement = document.createElement('div');
divElement.textContent = 'Hello, World!';
document.body.appendChild(divElement);

2. 使用 document.createTextNode()

const textNode = document.createTextNode('This is a text node');
document.body.appendChild(textNode);

3. 使用 innerHTML 或 outerHTML

const container = document.getElementById('container');
container.innerHTML = '<p>This is a paragraph</p>';

修改节点属性

创建节点后，可以修改其属性和样式：

1. 设置属性

js实现节点

const link = document.createElement('a');
link.href = 'https://example.com';
link.textContent = 'Visit Example';

2. 添加类名

const box = document.createElement('div');
box.classList.add('box', 'highlight');

3. 设置样式

const circle = document.createElement('div');
circle.style.width = '100px';
circle.style.height = '100px';
circle.style.backgroundColor = 'red';
circle.style.borderRadius = '50%';

节点操作

1. 添加子节点

js实现节点

const parent = document.createElement('div');
const child = document.createElement('span');
parent.appendChild(child);

2. 插入节点

const newItem = document.createElement('li');
newItem.textContent = 'New Item';
const list = document.querySelector('ul');
list.insertBefore(newItem, list.firstChild);

3. 移除节点

const elementToRemove = document.getElementById('remove-me');
elementToRemove.parentNode.removeChild(elementToRemove);

事件处理

可以为创建的节点添加事件监听器：

const button = document.createElement('button');
button.textContent = 'Click Me';
button.addEventListener('click', function() {
    alert('Button clicked!');
});
document.body.appendChild(button);

使用 DocumentFragment 优化性能

当需要添加多个节点时，使用 DocumentFragment 可以提高性能：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const item = document.createElement('li');
    item.textContent = `Item ${i}`;
    fragment.appendChild(item);
}
document.querySelector('ul').appendChild(fragment);