innerHTML vs document.write: javascript

by: christophermccannPosted on 2009-10-09 at 14:12:08ID: 25538914

you dont need to use ( ) around the inner html. as per below. I also changed your code a wee tiny bit.

<div id="externalImages">not changed</div>
<script type="text/javascript">
function readyIs() {
obj =  document.getElementById('externalImages');
obj.innerHTML= "<i>Replacing with getElementById</i> <script type='text/javascript'>var strSealURL='weblogos.dnb.com';var sealID='801639B3-2189-49C3-BE65-C72AEA5B2210';var strDuns='108639105';var strRWSPath='smallbusiness.dnb.com';var strCountry='US';var increment='true';var strLang='EN';</script><script tyoe='text/javascript' SRC='https://weblogos.dnb.com/newsi.js'></script>";
} 
window.onload = readyIs;
</script>

1:
2:
3:
4:
5:
6:
7:
8:
9:

Select all Open in new window

by: ITGaWDPosted on 2009-10-09 at 14:41:23ID: 25539123

I would use innerHTML, document.write can replace the whole place so if you ever have a input or div onclick for example and it does document.write ('Hello') it will do that exactly. basically overwrite the document and write Hello where as innerHTML will just change the content on that div.
you have more control with innerHTML

:)

by: M256Posted on 2009-10-09 at 15:04:52ID: 25539237

christophermccann, thanks for your response. The output of your code does not display an image, but rather the text in the box below.
Breaking up the <script> tags is the fix for this error.

Also, when I apply that fix again, it does not display the image either.

not changed
"; } window.onload = readyIs;

1:
2:

Select all Open in new window

by: ITGaWDPosted on 2009-10-09 at 15:21:25ID: 25539350

Try this

window.onload=function(){
  readyIs;
}

1:
2:
3:

Select all Open in new window

by: M256Posted on 2009-10-09 at 15:28:15ID: 25539394

Please test the code before posting a suggested fix. Thanks.

by: ITGaWDPosted on 2009-10-09 at 15:32:37ID: 25539420

I have :P

by: M256Posted on 2009-10-09 at 15:37:56ID: 25539448

Perhaps I have applied your suggestion incorrectly. Can you review?

Also, what browser are you using?

<div id=externalImages>not changed</div>
<script>
function readyIs() {
obj =  document.getElementById('externalImages');
obj.innerHTML=( "<i>Replacing with getElementById</i> <scr" + "ipt language='JavaScript'>var strSealURL='weblogos.dnb.com';var sealID='801639B3-2189-49C3-BE65-C72AEA5B2210';var strDuns='108639105';var strRWSPath='smallbusiness.dnb.com';var strCountry='US';var increment='true';var strLang='EN';</scr" + "ipt><scr" + "ipt language='JavaScript' SRC='https://weblogos.dnb.com/newsi.js'></scr" + "ipt>");
}
window.onload=function(){
  readyIs;
}
</script>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

Select all Open in new window

by: ITGaWDPosted on 2009-10-09 at 15:56:19ID: 25539532

Try this:

<html>
<head>
 
<script type="text/javascript">
window.onload=function(){
obj = document.getElementById("externalImages");
var obj_content = "<script type=\"text/javascript\">imageLoader()</scr" + "ipt>";
obj.innerHTML=obj_content;
}
 
function imageLoader(){
 alert('worked!');
}
</script>
</head>
<body>
<div id="externalImages">not changed</div>
 
 
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

Select all Open in new window

by: ITGaWDPosted on 2009-10-09 at 15:59:54ID: 25539544

Or even this

<html>
<head>
 
<script type="text/javascript">
window.onload=function(){
obj = document.getElementById("externalImages");
var obj_content = "<i>This should work, Adapt the script to how you need it!</i><script type=\"text/javascript\"></scr" + "ipt>";
obj.innerHTML=obj_content;
}
</script>
</head>
<body>
<div id="externalImages">not changed</div>
 
 
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

Select all Open in new window

by: ITGaWDPosted on 2009-10-09 at 16:03:15ID: 25539557

Oh, I see what you mean :P Sorry I'm not with it today.
The problem is, is that document.write is overwriting the whole document where as if you apply a <script> inside a div it won't work. You can try creating tags such as script tags. Need help with this?

by: M256Posted on 2009-10-09 at 16:04:37ID: 25539563

Still no go. Perhaps this will show the problem more plainly?

The alert shows the correct content. In fact, if I copy from the alert to an HTML page it works fine.

However, obj.innerHTML does not make the picture display.

<div id=externalImages>not changed</div>
<script>
obj =  document.getElementById('externalImages');
obj.innerHTML=( "<i>Replacing with getElementById</i> <scr" + "ipt language='JavaScript'>var strSealURL='weblogos.dnb.com';var sealID='801639B3-2189-49C3-BE65-C72AEA5B2210';var strDuns='108639105';var strRWSPath='smallbusiness.dnb.com';var strCountry='US';var increment='true';var strLang='EN';</scr" + "ipt><scr" + "ipt language='JavaScript' SRC='https://weblogos.dnb.com/newsi.js'></scr" + "ipt>");
alert(obj.innerHTML);
</script>

1:
2:
3:
4:
5:
6:

Select all Open in new window

by: ITGaWDPosted on 2009-10-09 at 16:29:57ID: 25539671

Right, I'll look into it tomorrow. Night

by: M256Posted on 2009-10-09 at 16:53:49ID: 25539741

You 'da man!
:)

by: ITGaWDPosted on 2009-10-10 at 02:26:18ID: 25541546

So, Spent ages on this thing lol. I just can't solve it :P You could always append an iframe with it in or something but that would slow the page down.

by: M256Posted on 2009-10-13 at 11:04:06ID: 25562496

I didn't find a solution. I assume that there is a quirk with their PHP image generator.

I simply removed the graphic from the page.

Thanks for looking in to this!

by: ITGaWDPosted on 2009-10-13 at 11:30:40ID: 25562748

Nps, Points would be nice for time. hehe jks jks. Hope you find a solution!

Question

innerHTML vs document.write

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

javascript

JavaScript

Hypertext Markup Language (HTML)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press