Question

I can understand basic javascript and jquery but I’m having a hard time understanding how to allow a user to see the source code of an element for example.

If I have an element on a webpage like this

`<p>Hi I'm an element</p>`

every body knows it will be displayed as this

Hi I'm an element

but I want a user to see this in its source code form

`<p>Hi I'm an element</p>`

How on earth is this done??

Answer 1

The basic idea is to get the HTML of an element, then show it somewhere as plain-text. We can use .html() to get the HTML and then .text() to output the same HTML as plain-text:

//on the click of a link
​$('a')​.on('click', function () {

    //append a container with the plain-text HTML of an element
    $('body').append($('<div />').text($('form').html()));
});​​

Here is the demo: http://jsfiddle.net/YbJfs/

Note that this does not get the actual <form> tag, but you could place the form in a container, select the container, and then use the .html() if that container and you’ll have the <form> tag as well.

Also, if you want to add the HTML to a form input or text-area, you can use .val() rather than .text().

Here is a demo: http://jsfiddle.net/YbJfs/1/