Take the 2-minute tour ×

I have a text area that I am populating with html code for people to cut & paste from. This textarea is "populated" using JQuery and .html(). with the "population" coming from a <div> elsewhere on the page example:

Div that "holds "population"

<div id="populationhold">this is the html to copy</div>

then the "magic of JQ" to "click" button and populate the textarea


and updatefunction is a bit like this:

function updatefunction(){
$('#textarea').html( $('#populationhold').val(); });

Now if I try to populate with something like this:

$('#textarea').html( 'this is the <br />html to copy');

The .html() will only print <br> NOT <br />. I have tried (in my way escaping with <br \/> but that doesn't do it. Suggestions please as I must "produce" clean XHTML code not just HTML4 code

The next bit is prob. just the same, but a bit more complex - hence the above to lead into this.

As a "user" of my site you will be able to add/delete bits from the code example:

<div id="populationhold">
<div class="codebit1">this is the <br />html to copy</div>
<div class="codebit2">this is more <br />html to copy</div>


Populating the textarea is fine and works and so does "90%" of the delete. which is something like this:

// This removes .codebit1 from #populationhold and runs the update to ummm update the textarea with the update function 
// Note: remove() is OK in this case as #codebit1 is totally dynamically created

The question here is OK I can remove/delete the bits that need deleted - hence the "90%" but how can I get rid of the "now orphan" \n<br/>\n that used to separate the 2 divs in #textarea. OK I can do it without the \n<br/>\n but it makes the code to copy "untidy" on the eye that is why the \n<br/>\n is there - also the \n<br/>\n does ensure that when the code is actually copied the user gets a sensible layout.

share|improve this question
Are you using correct doctype though? –  Timo Willemsen Feb 11 '11 at 11:59
@Timo I was just about to ask the same thing… –  Anriëtte Myburgh Feb 11 '11 at 12:03
add comment

1 Answer

up vote 1 down vote accepted

What you are doing is not correct I think.

A <textarea> is a multi line input object. So, you don't want to use the $('#textarea').html() function (I don't think it even exists for a <textarea>), but you want to use the $('#textarea').val() function to update it's contents.

If you do $('#textarea').val( 'this is the <br />html to copy'), you will get the correct result.

On the other hand, you do want to use .html() instead of .val() for the $('#populationhold') object, since you're retrieving it's value and it's children.

About innerHTML and XHTML

XHTML and innerHTML are no friends. They just don't work together. If you serve your document as xhtml/xml then you're getting in trouble. It doesn't make sense, innerHTML in XML.


innerHTML is just a function that gets the element's value, then concatinates it's childrens's name and value... It's just some string manipulation.

Semi solution

Steve Tucker created a innerXHTML function. You can see it working here:


There is, however, one thing you get <br /> is translated to <br></br>, but however, as far as I'm concerned, that's valid XHTML. I'll try to write a function that does the job well, because it seems like there is no way to do it now. But that might take some time xD

share|improve this answer
@Timo - Durr html not val , thnks but even so it doesn't print <br/> –  Russell Parrott Feb 11 '11 at 11:45
Hmm, yeah I was playing with it just now. It seems that the jQuery html function encodes it or so... Let me check it out xD –  Timo Willemsen Feb 11 '11 at 11:47
@Timo - this and above <!DOCTYPE html> <html dir="ltr" lang="en"> - "standard" HTML5 –  Russell Parrott Feb 11 '11 at 12:01
@Timo - just tried a valid XHTML DOCTYPE and same results –  Russell Parrott Feb 11 '11 at 12:04
Hmm, seems like innerHTML just doesn't work with XHTML. :P –  Timo Willemsen Feb 11 '11 at 12:33
show 1 more comment

Your Answer


