在 JavaScript 中写 HTML 代码的方法包括：使用 innerHTML 设置元素的 HTML 内容。使用 DOM API 创建和修改元素（createElement、appendChild）；使用 JavaScript 变量和函数创建动态 HTML 内容；修改现有内容（innerHTML、DOM API）；优化性能（缓存引用、用片段批量更新、避免频繁更新）。
如何在 JavaScript 中写 HTML 代码
简介
在 JavaScript 中写 HTML 代码可以实现动态创建和修改网页内容。这在创建交互式界面、加载远程数据以及更新部分页面时非常有用。
方法 1：使用 innerHTML
立即学习“前端免费学习笔记（深入）”；
- 内置属性
innerHTML可以设置元素的 HTML 内容。 - 语法：
element.innerHTML = "<h1>标题</h1><p>内容</p>";
方法 2：使用 DOM API
- DOM（文档对象模型）API 提供了更精细地控制 HTML 创建和修改的方法。
- 使用
createElement()创建新元素。 - 使用
appendChild()将新元素添加到父元素。 - 语法：
<code class="js">const h1 = document.createElement("h1");
h1.textContent = "标题";
const p = document.createElement("p");
p.textContent = "内容";
const body = document.querySelector("body");
body.appendChild(h1);
body.appendChild(p);</code>创建动态内容
- 使用 JavaScript 变量和函数可以创建动态 HTML 内容。
- 例如：
<code class="js">const name = "John";
const h1 = document.createElement("h1");
h1.textContent = `欢迎，${name}！`;</code>修改现有内容
- 使用
innerHTML或 DOM API 修改现有 HTML 元素的内容。 - 例如：
<code class="js">const p = document.querySelector("p");
p.textContent = "更新的内容";</code>性能考虑
- 过度使用
innerHTML可能会导致性能问题。 - 对于大量更新，建议使用 DOM API。
- 优化提示：
- 缓存元素引用。
- 使用片段来批量更新元素。
- 避免频繁更新。
