JavaScript 动态添加 HTML 代码是指使用 JavaScript 在页面加载后或在特定事件触发时,动态地向 HTML 文档中插入新的元素或修改现有元素。这种技术在创建交互式网页和动态内容时非常有用。
在 JavaScript 中,可以通过多种方式动态添加 HTML 代码:
innerHTML
属性:可以直接设置元素的 innerHTML
来替换或添加内容。createElement
、appendChild
、insertBefore
等来创建和插入新元素。innerHTML
// 假设有一个 id 为 'container' 的元素
let container = document.getElementById('container');
container.innerHTML = '<p>这是新添加的内容</p>';
// 创建一个新的段落元素
let newParagraph = document.createElement('p');
newParagraph.textContent = '这是新添加的内容';
// 获取容器元素并添加新段落
let container = document.getElementById('container');
container.appendChild(newParagraph);
let name = '张三';
let content = `<div><h1>欢迎 ${name}</h1><p>这是您的个人页面。</p></div>`;
document.getElementById('profile').innerHTML = content;
原因:频繁地修改 DOM 会导致浏览器重绘和回流,消耗大量资源。
解决方法:
DocumentFragment
来批量添加元素,然后一次性插入到 DOM 中。DocumentFragment
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
let li = document.createElement('li');
li.textContent = '列表项 ' + i;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);
通过上述方法,可以有效地提高动态添加 HTML 代码的性能和用户体验。
领取专属 10元无门槛券
手把手带您无忧上云