Javascript + InnerHTML problem

Henry · Aug 9, 2006

Hi

I have a problem, pls see below:

<html>
:
<script type="text/javascript">

</script>

:
<center id="emptySpace"></center>
<a href="javascript:addCode()">Add Code</a>
:
</html>

The problem is when I clicked on the link, only the text "This is a
test part" was displayed. The alert box was not appear.

Please help me, thanks.

Henry · Aug 9, 2006

Hi all,

i changed

<script language='javascript'>window.alert('Hi');</script>

to

<script defer>window.alert('Hi');</script>

and it works ....

but only in IE but not in Mozilla Firefox....

Please help me...Thanks.

RobG · Aug 9, 2006

Henry said:
Hi

I have a problem, pls see below:

<html>
:
<script type="text/javascript">
<!--

Don't use HTML comments inside script elements.

function addCode () {
document.getElementById('emptySpace').innerHTML+=
"<b>This is a test part </b><script
language='javascript'>window.alert('Hi');</script>";
}

Don't allow posted code to auto-wrap, wrap it manually at about 70
characters. Inserting script elements using innerHTML is problematic
since there is no public standard on how it should behave.

innerHTML is a proprietary Microsoft invention that has been widely but
inconsistently copied - you shouldn't rely on it.

// -->
</script>

:
<center id="emptySpace"></center>

The center element is deprecated in HTML 4.

<a href="javascript:addCode()">Add Code</a>
:
</html>

The problem is when I clicked on the link, only the text "This is a
test part" was displayed. The alert box was not appear.

Put the script in an external file. Create the script element using
document.createElement then assign an src attribute with a value that
points to the external file. There are lots of examples in the
archives.

file: a.js
==========

alert('hi');

file: a.html
============

<title>load script test</title>
<script type="text/javascript">

function loadScript(){
var oScr = document.createElement('script');
oScr.type = 'text/javascript';
oScr.src = 'a.js';
document.body.appendChild(oScr);
}

</script>
<input type="button" value="Add script" onclick="loadScript();">

Patient Guy · Aug 9, 2006

innerHTML is a proprietary Microsoft invention that has been widely but
inconsistently copied - you shouldn't rely on it.

I agree. So how does one convert a string of HTML to a DOM document
fragment for appending?

I have my own code, but I'll bet it's bug-ridden.

RobG · Aug 9, 2006

Patient said:
I agree. So how does one convert a string of HTML to a DOM document
fragment for appending?

The obvious answer is don't design your application to use HTML
fragments.

It is probablly OK to inject HTML where you are getting it from a
server (e.g. AJAX) in small chunks that you know work, however it
doesn't make much sense to use it for script elements, where logic
dictates the types of elements you are creating (or their attributes)
or where you know it is inconsistent across browsers.

IE is quite slow using DOM methods compared to innerHTML, but Firefox
isn't. I expect IE 7 to be much more efficient.

I have my own code, but I'll bet it's bug-ridden.

Check out the DOM 3 Load and Save spec, though at present IE lacks
useful support (again, IE 7 may change that but I don't think it will)
and Firefox's support is limited.

innerHTML	5	Oct 12, 2008
Correct javascript generates problems	1	Dec 31, 2022
Help with my responsive home page	2	Dec 14, 2022
Final chapter of "Learn PHP, MySQL and JavaScript"	3	Jun 4, 2024
Javascript DOM	1	Mar 29, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
What "might" I be doing wrong with this snippet?	6	Sep 25, 2023
innerHTML with AJAX problem	12	May 9, 2008

Javascript + InnerHTML problem

Henry

Henry

RobG

Patient Guy

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads