JavaScript 如何返回 HTML 或构建 HTML

在前端开发中，JavaScript 作为一门强大的脚本语言，常常需要与 HTML 进行交互，其中返回 HTML 或构建 HTML 是非常常见的需求。

一、使用 innerHTML 属性返回或构建 HTML

innerHTML 是 DOM 元素的一个属性，它允许我们获取或设置元素内部的 HTML 内容。如果想要返回某个元素内的 HTML，只需获取该元素，然后访问其 innerHTML 属性即可。例如：

const myDiv = document.getElementById('myDiv');
const divHTML = myDiv.innerHTML;
console.log(divHTML);

而构建 HTML 也很简单，通过修改 innerHTML 属性的值就能实现。比如我们要创建一个包含列表的新 HTML 片段：

const newHTML = '<ul><li>Item 1</li><li>Item 2</li></ul>';
const targetDiv = document.getElementById('targetDiv');
targetDiv.innerHTML = newHTML;

不过要注意，使用 innerHTML 时，如果插入的内容来自用户输入，可能存在安全风险，比如遭受跨站脚本攻击（XSS）。

二、使用 document.createElement 创建元素构建 HTML

使用 document.createElement 方法可以创建新的 HTML 元素，然后通过设置属性和添加子元素来构建复杂的 HTML 结构。例如创建一个新的段落元素并添加文本内容：

const newPara = document.createElement('p');
const paraText = document.createTextNode('This is a new paragraph.');
newPara.appendChild(paraText);
const body = document.body;
body.appendChild(newPara);

这种方式相对安全，因为它是通过创建 DOM 节点来构建 HTML，而不是直接插入字符串。

三、模板字符串构建 HTML

ES6 引入的模板字符串也可以用于构建 HTML。模板字符串允许嵌入表达式，使构建 HTML 更具可读性。例如：

const name = 'John';
const html = `
  <div>
    <h1>Welcome, ${name}</h1>
    <p>Have a great day!</p>
  </div>
`;
const container = document.getElementById('container');
container.innerHTML = html;

JavaScript 提供了多种方式来返回 HTML 或构建 HTML，每种方法都有其特点和适用场景。开发者可以根据项目的具体需求和安全要求，选择最合适的方式来实现与 HTML 的交互。