[RESOLVED] JavaScript innerHTML Problem

**Slyke** · Dec 10th, 2008, 02:32 AM

Why does

Code:

theMenuSection.innerHTML='<ul>';
alert(theMenuSection.innerHTML);

Produce

Code:

<ul> </ul>

?

This is very annoying since the list has a child list inside it and is constructed as the page is loading. Is there any way to prevent JavaScript from closing off the <ul> tag?

theMenuSection is a div tag (also tried span).

**Nightwalker83** · Dec 10th, 2008, 03:49 AM

What is the complete code?

**Slyke** · Dec 10th, 2008, 03:58 AM

This code here will produce the same problem:

Code:

<span id="testspan"></span>
<br />

<script>

var theMenuSection
theMenuSection=document.getElementById("testspan");
theMenuSection.innerHTML='<ul>';
alert(theMenuSection.innerHTML);
</script>

Copy paste it into a text file, and rename to htm, and open it.

The code that I'm doing it in is a bit long to send.

By the way, I'm using Firefox v3.

**Nightwalker83** · Dec 11th, 2008, 01:55 AM

I don't quite understand what it is you are trying to do whether you want:

1. Just have the opening <ul> tag.

or

2 Have the alert display the text within the <ul> tags?

**Slyke** · Dec 11th, 2008, 02:00 AM

I want to have just an opening <ul> tag inside theMenuSection.

But for some unknown reason, if you place in a <ul> tag, it also automatically closes the <ul> tag. Run the sample code I placed up and you will see what I mean.

I need the tag to remain open so that I can have another javascript function create a nested <ul> tag inside the parent one (For a nested list).

Basically, I need the HTML inside theMenuSection, to be what I want it to be, not having a </ul> in it, like is being placed in. So option 1.

Now, I really have no idea why it auto-closes the tag, and why on earth the developers would make it do this.

I need either an alternative (Something other then innerHTML), or a solution (Maybe a parameter somewhere)?

**Nightwalker83** · Dec 11th, 2008, 02:07 AM

Code:

<html>
<span id="testspan"></span>
<br />
<script>
var theMenuSection
theMenuSection=document.getElementById("testspan");
theMenuSection='<ul>'; 
alert(theMenuSection);
</script>
</html>

**Slyke** · Dec 11th, 2008, 08:09 AM

Actually, wait.

That don't work. If you do that, then theMenuSection no longer refers to the span/div tag.

**Slyke** · Dec 11th, 2008, 09:16 AM

I mean, you can no longer refer to the span/div tag. So how can this be achieved (The auto-completing turned off)?

**Nightwalker83** · Dec 11th, 2008, 08:55 PM

Try using the right or left function to subtract the length tag from that of innerHTML.

**Slyke** · Dec 12th, 2008, 03:25 AM

I already did that, but it still puts it there (It must put it there when it actually writes it to the webpage).

Maybe it's not possible, sooo... is there any other thing I can use to place html onto the page?

**Nightwalker83** · Dec 12th, 2008, 07:44 AM

Originally Posted by Slyke

I already did that, but it still puts it there (It must put it there when it actually writes it to the webpage).

Maybe it's not possible, sooo... is there any other thing I can use to place html onto the page?

Just a thought have you disabled the "code hints" in your html editor (if possible)?

Edit:

Code:

<html>
<span id="testspan"></span>
<br />
<script>
var theMenuSection
theMenuSection=document.getElementById("testspan");
theMenuSection.html='<ul>';
alert(theMenuSection.html);
</script>
</html>

**Slyke** · Dec 12th, 2008, 12:27 PM

You're a genius! That worked a charm

.

Can't disable "code hints" because this is going in an instruction manual for some online software (Everyone reading it would have to disable it right?).

**Nightwalker83** · Dec 12th, 2008, 06:14 PM

Originally Posted by Slyke

You're a genius! That worked a charm

.

Can't disable "code hints" because this is going in an instruction manual for some online software (Everyone reading it would have to disable it right?).

For some reason not sure why the following happen:

Code:

.html = open tag
.innerHTML = <ul></ul>
.outerHTML = <span id="testspan"></span>

Thread: [RESOLVED] JavaScript innerHTML Problem

Thread Tools

Display

[RESOLVED] JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Re: JavaScript innerHTML Problem

Posting Permissions