Javascript：body.append(content) 未呈现为 html [重复]

Posted 2023-05-07

【中文标题】Javascript：body.append(content) 未呈现为 html [重复]

【英文标题】：Javascript: body.append(content) is not rendered as html [duplicate]

【发布时间】：2021-08-13 12:38:00

【问题描述】：

我正在使用 javascript 模板构建一小段 html 文档。下面代码中的const button 是我的模板。如您所见，我使用替换替换了一些内容。 const button 变成 <button>label</button> 没关系。

const button = `<button>try</button>`;
const newButton = button.replace('try', 'label');
const body = document.querySelector('body');

现在我想将我的 bew 按钮附加到 body 标记内。

body.append(newButton);

它可以工作，但是当我刷新浏览器时，我看到“<button>label</button>”，但我想要这个 html 的渲染版本，现在我看不到一个按钮，只有一个字符串 <button>...。如何渲染这个按钮？

【问题讨论】：

您也可以通过document.body访问正文。

【参考方案1】：

用insertAdjacentHTML怎么样？

const button = `<button>try</button>`;
document.body.insertAdjacentHTML(`beforeend`, button.replace('try', 'label'));

【讨论】：

感谢insertAdjacentHTML