CODEWITHSUNDEEP
javascripthtmlbookmarklet
Charles Fecht
Charles Fecht

Reputation: 47

Adding code to <body> tag with bookmarklet

I am making a bookmarklet in which provides the user with navigation links on any page. I have the code I need, but am having trouble with the document.body.innerHTML.

Here's the code

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>";



But no matter what I do, i can't seem to find the problem.
I also tried running it through one of the "html encoders", thinking that the quotes were the issue, but that didn't seen to work either.

What did I did wrong?

Upvotes: 0

Views: 309

Answers (2)

Josh KG
Josh KG

Reputation: 5140

Your double-quotes are a problem -- the fastest fix is to use single-quotes around your string. Additionally, using the innerHTML method on the body element will actually remove the entire contents of the body and replace it with your new elements. If you just want to append (add to) the body, use the insertAdjacentHTML method instead. 

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>')

Upvotes: 1

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

working fiddle

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

you dont need document.body.innerHTML

call CSS in head tag

Upvotes: 0

Related Questions