js实现html
JavaScript 实现 HTML 的方法
在 JavaScript 中动态生成或操作 HTML 有多种方式，以下是一些常见的方法：
使用 document.createElement() 创建元素
通过 DOM API 创建新元素并添加到文档中：
const div = document.createElement('div');
div.textContent = '这是一个动态创建的 div';
div.className = 'dynamic-div';
document.body.appendChild(div);使用 innerHTML 属性
直接设置元素的 HTML 内容：
const container = document.getElementById('container');
container.innerHTML = '<p>这是通过 innerHTML 添加的内容</p>';使用 insertAdjacentHTML() 方法
在指定位置插入 HTML 字符串：
const target = document.querySelector('.target');
target.insertAdjacentHTML('beforeend', '<span>追加的内容</span>');使用模板字符串
结合 ES6 模板字符串动态生成复杂 HTML：
const items = ['苹果', '香蕉', '橙子'];
const list = document.getElementById('list');
list.innerHTML = `
<ul>
${items.map(item => `<li>${item}</li>`).join('')}
</ul>
`;使用 DocumentFragment
高效批量添加多个 DOM 节点：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const p = document.createElement('p');
p.textContent = `段落 ${i}`;
fragment.appendChild(p);
}
document.body.appendChild(fragment);使用第三方库
例如使用 jQuery 简化操作：
$('#container').append('<div class="box">jQuery 添加的内容</div>');注意事项
- 直接使用
innerHTML可能导致 XSS 攻击，对用户输入内容应进行转义 - 频繁操作 DOM 会影响性能，批量操作建议使用 DocumentFragment
- 现代框架如 React/Vue 提供了更声明式的 HTML 管理方式
这些方法可以根据不同场景需求选择使用，简单的静态内容可以使用 innerHTML，复杂动态内容推荐使用 DOM API 或现代前端框架。
