在 JavaScript 中写 HTML 代码的方法包括：使用 innerHTML 设置元素的 HTML 内容。使用 DOM API 创建和修改元素（createElement、appendChild）；使用 JavaScript 变量和函数创建动态 HTML 内容；修改现有内容（innerHTML、DOM API）；优化性能（缓存引用、用片段批量更新、避免频繁更新）。

如何在 JavaScript 中写 HTML 代码

简介

在 JavaScript 中写 HTML 代码可以实现动态创建和修改网页内容。这在创建交互式界面、加载远程数据以及更新部分页面时非常有用。

方法 1：使用 innerHTML

立即学习“前端免费学习笔记（深入）”；

• 内置属性 innerHTML 可以设置元素的 HTML 内容。
• 语法：element.innerHTML = "

  标题

  内容

  ";

方法 2：使用 DOM API

• DOM（文档对象模型）API 提供了更精细地控制 HTML 创建和修改的方法。
• 使用 createElement() 创建新元素。
• 使用 appendChild() 将新元素添加到父元素。
• 语法：

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);

创建动态内容

• 使用 JavaScript 变量和函数可以创建动态 HTML 内容。
• 例如：

const name = "John";
const h1 = document.createElement("h1");
h1.textContent = `欢迎，${name}！`;

修改现有内容

• 使用 innerHTML 或 DOM API 修改现有 HTML 元素的内容。
• 例如：

const p = document.querySelector("p");
p.textContent = "更新的内容";

性能考虑

• 过度使用 innerHTML 可能会导致性能问题。
• 对于大量更新，建议使用 DOM API。
• 优化提示：

1. 缓存元素引用。
2. 使用片段来批量更新元素。
3. 避免频繁更新。

以上就是如何在js中写html代码的详细内容，更多请关注php中文网其它相关文章！