Home/ Questions/Q 3944640
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T00:55:28+00:00

I have a text area that I am populating with html code for people

  • 0

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

$('#button').click(function(){ 
updatefunction();
});

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>
\n<br/>\
<div class="codebit2">this is more <br />html to copy</div>
</div>

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

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

$('#deletebutton').click(function(){     
$('.codebit1').remove(); 
// 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
updatefunction();
});

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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. 

    <element>value
 <child>childvalue</child>
</element>

    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:

    http://jsfiddle.net/pYUD4/10/

    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

    • 0