// 獲取元素內(nèi)容
const content = document.getElementById('container').innerHTML;

// 設(shè)置元素內(nèi)容
document.getElementById('container').innerHTML = '<h2>新標(biāo)題</h2><p>段落內(nèi)容</p>';

// 獲取文本內(nèi)容
const text = document.getElementById('title').textContent;

// 設(shè)置文本內(nèi)容
document.getElementById('title').textContent = '新的標(biāo)題文本';

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

// 設(shè)置文本
document.getElementById('element').innerText = '新內(nèi)容';

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

// 創(chuàng)建文本節(jié)點(diǎn)
const textNode = document.createTextNode('操作成功！');

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

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

// 創(chuàng)建文檔片段
const fragment = document.createDocumentFragment();

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

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

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

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

// 在元素第一個(gè)子元素前插入
element.insertAdjacentHTML('afterbegin', '<p>在內(nèi)部開頭插入</p>');

// 在最后一個(gè)子元素后插入
element.insertAdjacentHTML('beforeend', '<p>在內(nèi)部末尾插入</p>');

// 在元素結(jié)束后插入
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);

// 填充數(shù)據(jù)
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>標(biāo)題</h2><p>內(nèi)容</p></div>';

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

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

// 不佳：多次操作觸發(fā)多次重排
for (let i = 0; i < 100; i++) {
    document.getElementById('list').innerHTML += `<li>項(xiàng)目 ${i}</li>`;
}

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

// 不佳：直接添加事件監(jiān)聽器
document.getElementById('container').innerHTML = '<button class="btn">點(diǎn)擊</button>';
document.querySelector('.btn').addEventListener('click', handleClick);

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

// 危險(xiǎn)：直接插入用戶輸入
const userInput = '<script>惡意代碼</script>';
document.getElementById('container').innerHTML = userInput;

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

// 或者使用專門的消毒庫(kù)
// 如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秒后自動(dòng)消失
    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);
    });
    
    // 清空容器并添加新內(nèi)容
    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';
        
        // 加載更多數(shù)據(jù)
        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';
            });
    }
});