当前位置：首页 > JavaScript

js实现增删

2026-02-01 18:56:44JavaScript

js实现增加元素

通过DOM操作可以动态添加元素到页面中。常见方法包括使用createElement和appendChild。

// 创建新元素
const newElement = document.createElement('div');
newElement.textContent = '新增内容';

// 添加到DOM中
document.body.appendChild(newElement);

使用insertAdjacentHTML可以快速插入HTML字符串：

document.body.insertAdjacentHTML('beforeend', '<div>动态内容</div>');

js实现删除元素

删除元素需要先获取目标元素的引用，然后调用移除方法。

js实现增删

// 获取要删除的元素
const elementToRemove = document.getElementById('target');

// 从DOM中移除
if(elementToRemove) {
    elementToRemove.remove();
}

使用父元素移除子元素：

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.removeChild(child);

js实现修改元素

获取元素引用后直接修改其属性或内容。

js实现增删

// 修改元素内容
const element = document.getElementById('myElement');
element.textContent = '修改后的内容';

// 修改样式
element.style.color = 'red';

// 修改属性
element.setAttribute('data-value', '123');

js实现查询元素

使用DOM查询方法获取元素引用。

// 通过ID查询
const byId = document.getElementById('elementId');

// 通过类名查询
const byClass = document.getElementsByClassName('className');

// 通过标签名查询
const byTag = document.getElementsByTagName('div');

// 使用CSS选择器
const bySelector = document.querySelector('#container .item');
const bySelectorAll = document.querySelectorAll('.items');

js实现事件监听

为元素添加交互功能需要事件监听。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('按钮被点击');
});

// 事件委托
document.body.addEventListener('click', function(event) {
    if(event.target.classList.contains('item')) {
        console.log('点击了某个项目');
    }
});

js实现动态样式操作

通过classList或直接修改style属性来改变元素样式。

const box = document.getElementById('box');

// 添加类
box.classList.add('active');

// 移除类
box.classList.remove('inactive');

// 切换类
box.classList.toggle('visible');

// 直接修改样式
box.style.backgroundColor = '#f00';
box.style.width = '100px';

标签: js