使用书签将代码添加到 <body> 标记答案

【问题标题】：Adding code to <body> tag with bookmarklet使用书签将代码添加到 <body> 标记
【发布时间】：2014-11-06 00:20:21
【问题描述】：

我正在制作一个书签，在其中为用户提供任何页面上的导航链接。我有我需要的代码，但是 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 编码器”运行它，认为引号是问题所在，但这也不起作用。

我做错了什么？

【问题讨论】：

引号确实是这里的问题。用单引号替换开始/结束双引号，它应该可以工作。 document.body.innerHTML = '...'; 否则转义字符串内的双引号。
在没有 innerhtml 的情况下，代码语法是否按预期工作？一旦语法正确，然后设置 innerhtml 属性并从那里进行故障排除。是的，双引号内的双引号会引起问题。改用内部单引号\
这段代码会敲掉整个正文的内容——这是故意的吗？
我尝试用单引号替换开头和结尾的引号，转义双引号，并使用内部单引号代替双引号。似乎没有任何工作。我打开错误控制台，它说“SyntaxError: Unexpected EOF”
@JoshKG 不，它不是要替换正文代码，只需添加即可。

标签： javascript html bookmarklet

【解决方案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>')

【讨论】：

【解决方案2】：

工作小提琴

http://jsfiddle.net/fNPvf/9226/

你不需要document.body.innerHTML

在head标签中调用CSS

【讨论】：