使用 JavaScript 将文本更改为 img

【问题标题】：Change text to img using JavaScript使用 JavaScript 将文本更改为 img
【发布时间】：2015-03-30 01:29:31
【问题描述】：

我需要在使用 JavaScript 加载 html 时将我的 html 文档中的文本更改为一个小图像。

我是 JavaScript 新手，请耐心等待。这是我尝试过的代码：

    <body onload="stickers()">
    <span id="bonusIMG">Bonus</span>
    <script>
    function stickers() {
    document.getElementById('bonusIMG').innerHTML = <img src="http://foe.maniacal-loonies.eu/wp-content/uploads/2015/03/bonus25sq.png" alt="Bonus Added" width="25" height="25" />;
    </script>

【问题讨论】：

另外，有没有办法更改此代码，以便在不使用 getElementById() 的情况下仅搜索文档中的字符串“Bonus”？实际上，我更希望在页面加载时让 Bonus 这个词自动更改为图像。

标签： javascript image text innerhtml onload

【解决方案1】：

如果你要使用innerHTML，你需要把它变成一个字符串并用花括号关闭函数：

<body onload="stickers()">
<span id="bonusIMG">Bonus</span>
<script>
function stickers() {
    document.getElementById('bonusIMG').innerHTML = '<img src="http://foe.maniacal-loonies.eu/wp-content/uploads/2015/03/bonus25sq.png" alt="Bonus Added" width="25" height="25" />';
}
</script>
<!--More code here-->
</body>

此示例将在您加载正文时更改文本（使用不同的图像）：

function stickers() {
    document.getElementById('bonusIMG').innerHTML = '<img src="http://i.stack.imgur.com/yg5Hw.jpg?s=32&g=1" alt="Bonus Added" width="25" height="25" />';
}

<body onload="stickers()">
<span id="bonusIMG">Bonus</span>
<!--More code here-->
</body>

【讨论】：