当前位置：首页 > JavaScript

js动态实现

2026-04-05 16:17:12JavaScript

动态创建元素

使用 document.createElement() 方法创建新元素，然后通过 appendChild() 或 insertBefore() 将其添加到 DOM 中。

const div = document.createElement('div');
div.textContent = '动态创建的 div';
document.body.appendChild(div);

动态修改样式

通过元素的 style 属性直接修改 CSS 样式。

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

动态加载脚本

使用 document.createElement('script') 动态加载 JavaScript 文件。

const script = document.createElement('script');
script.src = 'path/to/script.js';
script.async = true;
document.head.appendChild(script);

动态绑定事件

通过 addEventListener 方法动态绑定事件处理函数。

js动态实现

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

动态修改内容

使用 innerHTML 或 textContent 属性动态修改元素内容。

const element = document.getElementById('content');
element.innerHTML = '<strong>新内容</strong>';

动态创建组件

结合模板字符串和 DOM 操作动态创建复杂组件。

js动态实现

function createCard(title, content) {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
        <h3>${title}</h3>
        <p>${content}</p>
    `;
    return card;
}

document.body.appendChild(createCard('标题', '内容'));

动态加载数据

使用 fetch API 动态加载数据并更新页面。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        const container = document.getElementById('data-container');
        container.innerHTML = data.map(item => `<div>${item.name}</div>`).join('');
    });

动态修改类名

通过 classList API 动态添加、移除或切换 CSS 类。

const element = document.getElementById('myElement');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');

动态创建表格

使用 DOM 方法动态创建表格结构。

function createTable(data) {
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    const tbody = document.createElement('tbody');

    // 创建表头
    const headerRow = document.createElement('tr');
    Object.keys(data[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // 创建表格内容
    data.forEach(item => {
        const row = document.createElement('tr');
        Object.values(item).forEach(value => {
            const td = document.createElement('td');
            td.textContent = value;
            row.appendChild(td);
        });
        tbody.appendChild(row);
    });
    table.appendChild(tbody);

    return table;
}

document.body.appendChild(createTable([
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 }
]));