JavaScript修改DOM元素内容的方法大全

// 获取元素内容
const content = document.getElementById('container').innerHTML;

// 设置元素内容
document.getElementById('container').innerHTML = '<h2>新标题</h2><p>段落内容</p>';

// 获取文本内容
const text = document.getElementById('title').textContent;

// 设置文本内容
document.getElementById('title').textContent = '新的标题文本';

// 获取可见文本
const visibleText = document.getElementById('element').innerText;

// 设置文本
document.getElementById('element').innerText = '新内容';

// 创建新元素
const newDiv = document.createElement('div');
newDiv.className = 'alert';
newDiv.setAttribute('role', 'alert');

// 创建文本节点
const textNode = document.createTextNode('操作成功！');

// 添加文本到元素
newDiv.appendChild(textNode);

// 添加到DOM中
document.getElementById('container').appendChild(newDiv);

// 创建文档片段
const fragment = document.createDocumentFragment();

// 批量创建元素并添加到片段
for (let i = 0; i < 100; i++) {
    const item = document.createElement('li');
    item.textContent = `项目 ${i + 1}`;
    fragment.appendChild(item);
}

// 一次性添加到DOM
document.getElementById('list').appendChild(fragment);

const element = document.getElementById('target');

// 在元素开始前插入
element.insertAdjacentHTML('beforebegin', '<p>在前方插入</p>');

// 在元素第一个子元素前插入
element.insertAdjacentHTML('afterbegin', '<p>在内部开头插入</p>');

// 在最后一个子元素后插入
element.insertAdjacentHTML('beforeend', '<p>在内部末尾插入</p>');

// 在元素结束后插入
element.insertAdjacentHTML('afterend', '<p>在后方插入</p>');

<template id="user-card">
    <div class="user-card">
        <h3 class="user-name"></h3>
        <p class="user-email"></p>
    </div>
</template>

// 使用模板
const template = document.getElementById('user-card');
const clone = template.content.cloneNode(true);

// 填充数据
clone.querySelector('.user-name').textContent = '张三';
clone.querySelector('.user-email').textContent = 'zhangsan@example.com';

// 添加到DOM
document.getElementById('container').appendChild(clone);

const parser = new DOMParser();
const htmlString = '<div><h2>标题</h2><p>内容</p></div>';

// 解析HTML
const doc = parser.parseFromString(htmlString, 'text/html');
const nodes = doc.body.childNodes;

// 添加到DOM
document.getElementById('container').appendChild(nodes[0]);

// 不佳：多次操作触发多次重排
for (let i = 0; i < 100; i++) {
    document.getElementById('list').innerHTML += `<li>项目 ${i}</li>`;
}

// 更佳：使用文档片段减少重排
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `项目 ${i}`;
    fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

// 不佳：直接添加事件监听器
document.getElementById('container').innerHTML = '<button class="btn">点击</button>';
document.querySelector('.btn').addEventListener('click', handleClick);

// 更佳：使用事件委托
document.getElementById('container').innerHTML = '<button class="btn">点击</button>';
document.getElementById('container').addEventListener('click', (event) => {
    if (event.target.classList.contains('btn')) {
        handleClick();
    }
});

// 危险：直接插入用户输入
const userInput = '<script>恶意代码</script>';
document.getElementById('container').innerHTML = userInput;

// 安全：使用textContent或DOMParser
document.getElementById('container').textContent = userInput;

// 或者使用专门的消毒库
// 如DOMPurify.sanitize(userInput)

function showFormMessage(message, type = 'success') {
    const messageDiv = document.createElement('div');
    messageDiv.className = `alert alert-${type}`;
    messageDiv.textContent = message;
    
    // 插入到表单前面
    const form = document.getElementById('myForm');
    form.parentNode.insertBefore(messageDiv, form);
    
    // 3秒后自动消失
    setTimeout(() => {
        messageDiv.remove();
    }, 3000);
}

function updateDashboard(data) {
    // 使用文档片段批量更新
    const fragment = document.createDocumentFragment();
    
    Object.entries(data).forEach(([key, value]) => {
        const element = document.createElement('div');
        element.className = 'data-item';
        element.innerHTML = `
            <span class="data-label">${key}:</span>
            <span class="data-value">${value}</span>
        `;
        fragment.appendChild(element);
    });
    
    // 清空容器并添加新内容
    const container = document.getElementById('dashboard');
    container.innerHTML = '';
    container.appendChild(fragment);
}

let isLoading = false;

window.addEventListener('scroll', () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    
    if (scrollTop + clientHeight >= scrollHeight - 100 && !isLoading) {
        isLoading = true;
        
        // 显示加载指示器
        document.getElementById('loading').style.display = 'block';
        
        // 加载更多数据
        loadMoreItems()
            .then(items => {
                const fragment = document.createDocumentFragment();
                
                items.forEach(item => {
                    const li = document.createElement('li');
                    li.textContent = item.title;
                    fragment.appendChild(li);
                });
                
                document.getElementById('list').appendChild(fragment);
            })
            .finally(() => {
                isLoading = false;
                document.getElementById('loading').style.display = 'none';
            });
    }
});