Insert html into web page using javascript's .innerHTML

Question

I am making a template for a web site, and decided to try to use an external JS file to insert html into the top of the page for navigation (instead of having to copy and paste it every time)

I am trying to use (as the title states) The .innerHTML tag to do this so I can edit the code in whole.

Here it is:

JavaScript

document.getElementById("insert").innerHTML += '<script         language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "inline") {
        ele.style.display = "none";
    text.innerHTML = '<img src="http://www.psdgraphics.com/file/down-    arrow-icon.jpg" height="25" width="25">';
}
else {
    ele.style.display = "inline";
    text.innerHTML = '<img src="http://www.psdgraphics.com/file/up-arrow-icon.jpg" height="25" width="25">';
}
} 
</script>
<body>

 <a id="displayText" href="javascript:toggle();"><img     src="http://www.psdgraphics.com/file/down-arrow-icon.jpg" height="25" width="25"></a><span style="text-size: 30px;">Logo</span>

<div id="toggleText" class="navbar" style="display: none">
<div style="background-color: #8CBADB; text-align:center; height:25px; width:250px; border: .5px solid black;">
<a href="#">Home</a>
<a href="#">About</a></div>
</div>
<br>
Content';

HTML

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title></title>
   </head>
  <div id="insert"></div>
</body>
</html>

I have double checked that I escaped the quotes, I ran it through JSLint, and checked for possible syntax errors. I have so far come up with nothing.

What am I going wrong?

You shouldn't add javascript to your page with innerHTML. I'm not even sure that works... You should add the elements to your page using document.createElement and document.addChild. You completely need to change your approach. — ratherblue
– ratherblue, Commented Feb 6, 2015 at 17:56
your source html is not well formatted there's no <body> element in your mark-up. I know you're trying to insert that from JavaScript but that not a good approach. If you have to insert mark-up into two sections of your document (one in the header and one in the document body than insert two separate blocks. When you load the html its not valid. The scripts then load and then try to insert into the document (which is malformed) - keep the mark-up valid and insert what you need separately — Code Uniquely
– Code Uniquely, Commented Feb 6, 2015 at 18:07
I am aware of the errors. This is not the exact code I mean to use. I only intend I add code into the <body> tag and use the head tag for calling the js file to insert it. I apologize if this makes it tough to addres the problem, but my only resource right now is the iPad and it is not easy to code on, I just use it for making the bare bones of what I'm going to use. — Charles Fecht
– Charles Fecht, Commented Feb 6, 2015 at 18:58

Bhojendra Rauniyar · Accepted Answer · 2015-02-06 17:53:10Z

1

You need to assign but not to concatenate.

document.getElementById("insert").innerHTML += 
// Remove + from here----------------------^^

answered Feb 6, 2015 at 17:53

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dale Over a year ago

First thing I noticed

teo van kot · Accepted Answer · 2015-02-06 19:06:10Z

0

I see two problems in your code:

You need to assign only in line no 1, remove the concatenation sign +

document.getElementById("insert").innerHTML +=
At line no 7 and 11 avoid using single single quote, instead that use double quotes, It's making the wrong syntax, because it will make end of the expression here.

edited Feb 6, 2015 at 19:06

teo van kot

12.5k10 gold badges40 silver badges73 bronze badges

answered Feb 6, 2015 at 18:19

Tushar

263 bronze badges

Collectives™ on Stack Overflow

Insert html into web page using javascript's .innerHTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related