decode and encode HTML from php htmlentities in real time using jQuery

Question

Well this is the problem, i have a "pre" tag with encoded html using htmlentities() from php that shows correctly on website.

But then i want to redecode it to put it in a "textarea" to work with in real time. (like stackoverflow does for example). And then this text modified is encoded (again and again) in the "pre" tag with the new info.

I tried this but it seems that it doesnt work, because the textarea is allways empty. This is the code:

<script>
var t0=document.getElementById("textarea0"),
x0=document.getElementById('pre0');

t0.value=x0.innerHTML().html().text(); //dec
t0.onkeyup=function(){
x0.innerHTML=t0>.value.text().html(); //enc};
</script>

i dont really understand how this code works, i know is wrong because jquery is far away from my mind, i saw others similar questions related to this using $('<div/>') before encoding but I dont think that was the problem. (i repeat that i am blind on this)

(sorry if i do too many mistakes, im not english writer as you can guess, and im not using translators)

EDITED

Well first part works now, Textarea is filled with the content of the PRE and is decoded (with <>and that kind of things) for real work.

But i cant give it back to the PRE, putting them the new changes.

this is the actual code now:

var t0=$("textarea#textareaName0"),
x0=$('pre#xmpName0');

t0.val(x0.text()); //dec
t0.keyup(function()
{
x0.innerHTML=t0.val(); //enc
});

Any solution? (thank you so much)

Final Solution

In order to update content the code which work is:

t0.keyup(function()
{
x0.text(t0.val()); //enc
});

As you said, jquery can print on screen HTML without been interpreted so i DOESNT need encoding to avoid it. Thank you so much.

Answer 1

I'm assuming this is something like a HTML tutorial that shows HTML source, then you want that source to be edited verbatim (without all the > stuff)

var src = $("pre").text() will give you the source in variable src.

$("textarea").val(src); should put it into the text area (from here).

Incidentally, $(src) gives you a detached DOM with the src, justs as $('<div/>') gives you a DOM containing one div. You seem to want the user to edit, not jQuery so you already have everything you need in src and don't need to create a DOM. You would only want to DOM if you wanted to insert elements from jQuery.

Answer 2

You cannot encode text that's flattened from HTML, using .text(). The HTML information is gone forever from it. And .text() returns a string, and it does not have a method named .html().

At best, you can put the flattened text back into the textarea.

x0.innerHTML=t0.value;