如何在打字稿中创建带有图标和文本的按钮

Answer 1

您的第一个 JS 解决方案不起作用，因为设置 textContent 会删除按钮中的所有内容。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

为了使用 JS 重新创建 HTML 所做的事情，您可以使用 Text 对象。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Text

这里有一个repl：https://replit.com/@billuc/IconButton#index.html

代码：

    const btn = document.createElement("button");
    const img = document.createElement("img");
    const text = new Text(" Button text");
    img.src = `img/favicon.png`;
    img.alt = "Icon";
    img.width = "10";
    img.height = "10";
    btn.appendChild(img);
    btn.appendChild(text);
    document.body.appendChild(btn);