[SOLVED] HTML not parsing

[jaymc]

I have this function which adds text to the bottom of a div

 

	function addtext(what){
	if (document.createTextNode){
	var mytext=document.createTextNode(what)
	document.getElementById("messages").appendChild(mytext)
	}
}

 

However, if I do

 

addtext("<BR>Hello");

 

On my webpage, it actually displays <BR>Hello

 

Why isnt the <BR> Being parsed? I have also tried using \n but that doesnt work either

 

Is this a bug? Is there a way around this or am I doing something wrong

 

Answer egaily awaited!

 

Cheers

[jaymc]

Resolved

[jaymc]

New problem..

 

Right ok I have found the answer to my above, I am using this method

 

var aElement=document.createElement('BR');

messages.appendChild(aElement);

 

function addtext(what){

		if (document.createTextNode){
	var mytext=document.createTextNode(what)
	document.getElementById("messages").appendChild(mytext)
	}
}

 

Its working, but I have just thought of a new problem

 

This function addtext(what) is used to add text inside a div

 

The text is produced from a form field, parsed by PHP, sent back to the javascript as a response via AJAX and then added to the div

 

As part of my PHP parsing, I am going to turn into <img src=wink.gif>

 

So, addtext may contain this for instance

 

addtext("hello how are you <img src=wink.gif>")

 

I can manually add elements as shown in my <BR> example above, but this new problem.. I need a new way

 

It would be great if I could tell javascript to treat the entire string as HTML, or, parse it off as HTML

 

The creating elements and adding them just wont work

 

please advise, my project is at a standstill

 

Thanks!

[mainewoods]

document.getElementById('yourDIV').innerHTML += what; // uses '+=' 

 

--innerHTML will have an even longer life than COBOL(which still lives) and will defy all attempts to kill it!

 

[jaymc]

document.getElementById('yourDIV').innerHTML += what; // uses '+=' 

 

--innerHTML will have an even longer life than COBOL(which still lives) and will defy all attempts to kill it!

 

Huh! You have lost me! What is COBOL?

 

Also, this += method, Im assuming that doesnt need to read the innerHTML first, it simply adds specified text at the end?

 

If so that would be awesome!

[jaymc]

Great! Just got a chance to test it

 

So simple using the +=

 

THanks!

[fenway]

Great! Just got a chance to test it

 

So simple using the +=

 

THanks!

NEVER use += with innerHTML -- build you string first, and then assign the entire thing back.

[mainewoods]

but isn't that what '+=' does fenway, because it is the same as:

document.getElementById('yourDIV').innerHTML  = document.getElementById('yourDIV').innerHTML  + what;

--which does build the string first!

--the only alternative to that is if he already has the current contents of the area stored in a js variable:

document.getElementById('yourDIV').innerHTML  = currentcontents + what;

--but then that would require this statement also:

currentcontents = currentcontents + what;

 

--pretty much 6 of one half a dozen of the other I would say!

 

 

 

[fenway]

Not the same... if you do this:

 

el.innerHTML += '<DIV>';

el.innerHTML += 'blah blah blah;

el.innerHTML += '</DIV>';

 

Then the first div will close right away, since it's automatically reparsed after each assignment!  Doesn't matter much for divs, but if you're using table/tr/td, you'll get into trouble.  As long as you don't assign "incomplete" code, it's fine... but it's expensive to call this function, so you should only do it once anyway.

[mainewoods]

ya I see, you don't want to call it multiple times in a row like that.  And you definitely don't want to ever assign incomplete code.  I've found that as long as you observe proper nesting and close all tags, then you will almost never have any problem innerHTML'ing anything including whole forms.  If you innerHTML incomplete code, or if there is improper nesting around the innerHTML'ed item, then some browser or other will not render it.

<div>
<div id="???">innerHTML div</div>
<h2>blabla</div><!-- div closed too early, h2 should have been closed first! -->
</h2>

something like the above is bound to cause you a problem on some browser or other, because of the incorrect nesting of items around the item that will be innerHTML'ed! I believe that the majority of problems people have with innerHTML'ing forms is caused by that.  As well it's always best to innerHTML entire html structures only, like an entire form /form, or an entire table /table or an entire ul /ul.  As long as you keep to those rules, innerHTML can handle almost any HTML on almost any browser!