PDA

View Full Version : 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. :)

<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
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?

<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.
<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
You can not put a SPAN inside a table data cell.Since when?
Willy Duitt
11-26-2003, 02:54 AM
Originally posted by adios
Since when?

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

.....Willy
adios
11-26-2003, 03:10 AM
Do you have a link to that resource?
liorean
11-26-2003, 03:42 AM
Originally posted by Willy Duitt
You can not put a SPAN inside a table data cell.
I beg to differ:From <http://www.w3.org/TR/html4/strict.dtd>
<!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:

.......
<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:

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.
Willy Duitt
11-26-2003, 12:06 PM
Gald you got it fixed. :thumbsup:
Apologize for steering you wrong.

....Willy