javascript - 使用小书签将代码添加到 标记

Question

我正在制作一个书签，在其中为用户提供任何页面上的导航链接。我有我需要的代码，但在使用 document.body.innerHTML 时遇到问题。

这是代码

document.body.innerHTML = "<style>
body{padding:0;margin:0;}
.myFloatBar{
bottom:0;
left:0;
width:100%;
position:fixed;

}
</style>
<div class="myFloatBar">
<a href="javascript: history.back();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/back3.png" border="0"></a>
<a href="javascript: location.reload();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/refresh3.png" border="0"></a>
<a href="javascript: history.forward();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/forward3.png" border="0"></a>
</div>";

但无论我做什么，我似乎都找不到问题所在。
我还尝试通过“html编码器”之一运行它，认为引号是问题所在，但这也不起作用。

我做错了什么？

Answer 1

你的双引号是一个问题——最快的解决方法是在你的字符串周围使用单引号。此外，在 body 元素上使用 innerHTML 方法实际上会删除 body 的全部内容并将其替换为新元素。如果您只想附加(添加到)正文，请改用 insertAdjacentHTML 方法。

document.body.insertAdjacentHTML('beforeend','<style>
    .myFloatBar{
    bottom:0;
    left:0;
    width:100%;
    position:fixed;
    }
</style>
<div class="myFloatBar">
<a href="javascript: history.back();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/back3.png" border="0"></a>
<a href="javascript: location.reload();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/refresh3.png" border="0"></a>
<a href="javascript: history.forward();"><img src="https://6895974884731443be5a54869b555c239e101a11.googledrive.com/host/0B-uT9QTKkBoROS03Z1FxaHJrVGM/nav/forward3.png" border="0"></a>
</div>')