innerHTML w/ IE and <li>

dswimboy · 11-25-2003, 02:59 AM

with an span named administration i have the following code.

administration.innerHTML = '<br><b><A CLASS="links" href="board.html">Board</A></b>';

this executes correctly.

administration.innerHTML = '<br><li><A CLASS="links" href="board.html">Board</A></li>';

this code however does not execute correctly. i am wondering if there is a work around for changing HTML on the fly including adding list items and other fun formatting tags.

Willy Duitt · 11-25-2003, 03:41 AM

This works for me.

dswimboy · 11-25-2003, 04:24 AM

I tested your script in Netscape 7 and Mozilla (1.4 i think), but it still generates errors in IE6.

the error says that this line: document.getElementById('administration').innerHTML = '<br><li><A CLASS="links" href="board.html">Board 1</A></li><li><A CLASS="links" href="board.html">Board 2</A></li><li><A CLASS="links" href="board.html">Board 3</A></li>'; character 2 creates an unknown runtime error in IE. i've tried document.administration.innerHTML too. IE says document.administration.innerHTML is null or not an object.

Willy Duitt · 11-25-2003, 06:11 AM

I'm using IE6....

There must be another problem caused by
the way you are implementing the script.

.....Willy

Kor · 11-25-2003, 10:57 AM

IE6 here, and the code works ok. It may be some empty spaces when copying the script... I use Dreamweaver and this editor unwraps automatically the code for avoiding this, but I think that copying in Notepad may give errors becouse of the wrapped lines...

dswimboy · 11-25-2003, 09:04 PM

check http://www.bbaswim.org/~mburkebba/index.shtml i want the bullets to come down under Administration. when i click administration, i get a scrip error.

Willy Duitt · 11-25-2003, 09:15 PM

No wonder it doesn't work!
What the heh is all of the additional spans?

Code:

<script type="text/javascript">
function loadIt() {
document.getElementById('administration').innerHTML = '<li><A CLASS="links" href="board.html">Board 1</A></li>'; //'<br><span class="dot">l </span><br><span class="dot">l </span><A CLASS="links" href="board.html">Board 2</A><br><span class="dot">l </span><A CLASS="links" href="board.html">Board 3</A>';
}
</script>

It is so much more practical to first use any proffered
solution as is, before you start making changes and then say
it doesn't work.

I don't have time at the moment to look into this any deeper.
If you haven't fixed it, I'll try to look at it later when I have time.

......Willy

Willy Duitt · 11-25-2003, 09:49 PM

You can not put a SPAN inside a table data cell.
You will need to use CSS to position the elements of
your page if you want continue to use this method.

This works.
Double Click closes the expanded span.

Code:

<script type="text/javascript">
function loadIt() {
document.getElementById('administration').innerHTML = '<li><A CLASS="links" href="board.html">Board 1</A></li><li><A CLASS="links" href="board.html">Board 2</A></li><li><A CLASS="links" href="board.html">Board 3</A></li>';
}
function unloadIt() {
document.getElementById('administration').innerHTML ='';
}
</script>
</HEAD>

<BODY>
<a href="#" onclick="loadIt()" ondblclick="unloadIt()">Administration</a>
<span ID="administration"></span></P>
<P><A href="meets.html" class="big">Meets</A>
<LI><A CLASS="links" href="board.html">Board</A></LI>
<LI><A CLASS="links" href="coaches.html">Coaches</A></LI>
<LI><A CLASS="links" href="committee.html">Committee Chairs</A></LI>
<LI><A CLASS="links" href="communication.html">Communication</A></LI>
<LI><A CLASS="links" href="faqs.html">FAQs</A></LI>
<LI><A CLASS="links" href="m-schedule.html">Schedule</A></LI>
<LI><A CLASS="links" href="results.html">Results</A></LI>
<LI><A CLASS="links" href="entry.html">Entry Process</A></LI>
<LI><A CLASS="links" href="standards.html">Time Standards</A></LI></P>
<P><A href="member-handbook.html" class="big">Member Handbook</A>
<LI><A CLASS="links" href="parent-resp.html">Parent Responsibilities</A></LI>
<LI><A CLASS="links" href="records.html">Records</A></LI>
<LI><A CLASS="links" href="behavior.html">Swimmer Behavior</A></LI>
<LI><A CLASS="links" href="swimmer-resp.html">Swimmer Responsibilities</A></LI>
<LI><A CLASS="links" href="terms.html">Swimming Terms</A></LI>
<P><A href="practice-groups.html" class="big">Practice Groups</A>
<LI><A CLASS="links" href="descriptions.html">Descriptions</A></LI>
<LI><A CLASS="links" href="representatives.html">Representatives</A></LI>
<LI><A CLASS="links" href="p-schedule.html">Schedule</A></LI></P>
<P><A href="registration.html" class="big">Registration</A></P>
<P><A href="links.html" class="big">Swim Links</A></P>

......Willy

adios · 11-26-2003, 02:41 AM

Quote:

You can not put a SPAN inside a table data cell.

Since when?

Willy Duitt · 11-26-2003, 02:54 AM

Quote:

Originally posted by adios
Since when?

It could be because I said so.
Or you can RTFM

.....Willy

adios · 11-26-2003, 03:10 AM

Do you have a link to that resource?

liorean · 11-26-2003, 03:42 AM

Quote:

Originally posted by Willy Duitt
You can not put a SPAN inside a table data cell.

I beg to differ:

Quote:

From <http://www.w3.org/TR/html4/strict.dtd>

Code:

<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

<!ENTITY % flow "%block; | %inline;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

dswimboy · 11-26-2003, 05:26 AM

the additional span tags are commented out. that method, by the way, does work. the li tags are the problem. when i try to set the 'administration' span to anything with an li tag in it, i get an error. and only in IE.

adios · 11-26-2003, 06:11 AM

Not entirely sure what you're trying to do - but that 'unknown runtime error' is usually, in innerHTML-writing situations, a sign that you've attempted some invalid markup. Anyway, you've got list items without an <ul> or <ol> container...might try this:

Code:

.......
<TD bgcolor="#0000CD" VALIGN="top"><BR>
<P><a href="javascript:loadIt()" CLASS="big">Administration</a>
<ul ID="administration">
</P>
<P><A href="meets.html" class="big">Meets</A>
				<LI><A CLASS="links" href="board.html">Board</A></LI>
				<LI><A CLASS="links" href="coaches.html">Coaches</A></LI>
........

...and:

Code:

function loadIt()
{
	var admin = document.getElementById('administration');
	admin.innerHTML = '<li><a class="links" href="board.html">Board 1</a></li>' + admin.innerHTML; 
}

dswimboy · 11-26-2003, 07:01 AM

yes, the last post solved my problem. thanks guys.

11-25-2003, 02:59 AM	PM User \| #1
dswimboy Regular Coder Join Date: Nov 2003 Location: mostly in Ann Arbor Posts: 458 Thanks: 0 Thanked 0 Times in 0 Posts	innerHTML w/ IE and <li> with an span named administration i have the following code. administration.innerHTML = '<br><b><A CLASS="links" href="board.html">Board</A></b>'; this executes correctly. administration.innerHTML = '<br><li><A CLASS="links" href="board.html">Board</A></li>'; this code however does not execute correctly. i am wondering if there is a work around for changing HTML on the fly including adding list items and other fun formatting tags.

11-25-2003, 04:24 AM	PM User \| #3
dswimboy Regular Coder Join Date: Nov 2003 Location: mostly in Ann Arbor Posts: 458 Thanks: 0 Thanked 0 Times in 0 Posts	Half-fix I tested your script in Netscape 7 and Mozilla (1.4 i think), but it still generates errors in IE6. the error says that this line: document.getElementById('administration').innerHTML = '<br><li><A CLASS="links" href="board.html">Board 1</A></li><li><A CLASS="links" href="board.html">Board 2</A></li><li><A CLASS="links" href="board.html">Board 3</A></li>'; character 2 creates an unknown runtime error in IE. i've tried document.administration.innerHTML too. IE says document.administration.innerHTML is null or not an object.

11-25-2003, 10:57 AM	PM User \| #5
Kor Red Devil Mod Join Date: Apr 2003 Location: Bucharest, ROMANIA Posts: 6,066 Thanks: 30 Thanked 143 Times in 139 Posts	IE6 here, and the code works ok. It may be some empty spaces when copying the script... I use Dreamweaver and this editor unwraps automatically the code for avoiding this, but I think that copying in Notepad may give errors becouse of the wrapped lines... __________________ KOR -----------------*

11-25-2003, 09:15 PM	PM User \| #7
Willy Duitt Banned Join Date: Sep 2003 Posts: 3,620 Thanks: 0 Thanked 0 Times in 0 Posts	No wonder it doesn't work! What the heh is all of the additional spans? Code: <script type="text/javascript"> function loadIt() { document.getElementById('administration').innerHTML = '<li><A CLASS="links" href="board.html">Board 1</A></li>'; //'<br><span class="dot">l </span><br><span class="dot">l </span><A CLASS="links" href="board.html">Board 2</A><br><span class="dot">l </span><A CLASS="links" href="board.html">Board 3</A>'; } </script> It is so much more practical to first use any proffered solution as is, before you start making changes and then say it doesn't work. I don't have time at the moment to look into this any deeper. If you haven't fixed it, I'll try to look at it later when I have time. ......Willy

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

11-25-2003, 03:41 AM	PM User \| #2
Willy Duitt Banned Join Date: Sep 2003 Posts: 3,620 Thanks: 0 Thanked 0 Times in 0 Posts	This works for me. <script type="text/javascript"> function loadIt() { document.getElementById('administration').innerHTML = '<br><li><A CLASS="links" href="board.html">Board 1</A></li><li><A CLASS="links" href="board.html">Board 2</A></li><li><A CLASS="links" href="board.html">Board 3</A></li>'; } </script> </HEAD> <BODY onload="loadIt()"> <span ID="administration"></span> .....Willy

11-25-2003, 06:11 AM	PM User \| #4
Willy Duitt Banned Join Date: Sep 2003 Posts: 3,620 Thanks: 0 Thanked 0 Times in 0 Posts	I'm using IE6.... There must be another problem caused by the way you are implementing the script. .....Willy

11-25-2003, 09:04 PM	PM User \| #6
dswimboy Regular Coder Join Date: Nov 2003 Location: mostly in Ann Arbor Posts: 458 Thanks: 0 Thanked 0 Times in 0 Posts	check http://www.bbaswim.org/~mburkebba/index.shtml i want the bullets to come down under Administration. when i click administration, i get a scrip error.

11-26-2003, 03:10 AM	PM User \| #11
adios Senior Coder Join Date: Jun 2002 Posts: 1,403 Thanks: 2 Thanked 31 Times in 31 Posts	Do you have a link to that resource?

11-26-2003, 05:26 AM	PM User \| #13
dswimboy Regular Coder Join Date: Nov 2003 Location: mostly in Ann Arbor Posts: 458 Thanks: 0 Thanked 0 Times in 0 Posts	the additional span tags are commented out. that method, by the way, does work. the li tags are the problem. when i try to set the 'administration' span to anything with an li tag in it, i get an error. and only in IE.

11-26-2003, 07:01 AM	PM User \| #15
dswimboy Regular Coder Join Date: Nov 2003 Location: mostly in Ann Arbor Posts: 458 Thanks: 0 Thanked 0 Times in 0 Posts	yes, the last post solved my problem. thanks guys.