Javascript：body.append（内容）未呈现为 html

Question

我正在使用 javascript 模板构建一小部分 html 文档。下面代码中的 const button 是我的模板。如您所见，我使用 replace 替换了一些内容。 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>...。如何呈现此按钮？

Answer 1

使用insertAdjacentHTML怎么样？

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