Adding text to <textarea> via jquery than into HTML

Question

I've been trying to get this idea I had together for a simple project i'm working on.

The result I would like is to have a button that when clicked adds the barebones tags of a HTML5 doc. From there, I'd like to be able to add other HTML tags to it as well such as, lists, paragraphs, headers,a page title etc. and have them be in their proper place so if I add a <p> tag it'll be added in the body however, when I'm adding the <title> it will be under the head.

The problem I'm running into is that I've figured out how to get the "tags" into the textarea using it's .val() selector, but it's technically text NOT actual HTML so, I don't know how I could add/remove other elements without somehow switching the text in the textarea to actual HTML and try append or prepend every time a button is clicked from there.

here's what I have so far for the jQuery...

$(document).ready(function () {
    $("button#setup").click(function () {
    var text_area = $("#code_window")
    $(text_area).val("<!DOCTYPE html>" + "\n" + "<html>" + "\n" + "<head>" + "\n\t\n" +        "</head>" + "\n" + "<body>" + "\n\t\n" + "</body>" + "\n" + "</html>");
    });
});

and here's everything together..

http://jsfiddle.net/fHg8H/

Anything you could contribute would be appreciated.

Thanks!

As per my suggestion you should create html clone in hidden and whenever user click on button at that time that html will be append to main text area accordingly. — Dhaval Bharadva
– Dhaval Bharadva, Commented Oct 9, 2013 at 6:16
Try below link : [stackoverflow.com/questions/946534/… [1]: stackoverflow.com/questions/946534/… — Nirmal
– Nirmal, Commented Oct 9, 2013 at 6:30

Sergio · Accepted Answer · 2013-10-09 06:19:08Z

1

I would use .text(). Try this:

$(document).ready(function () {
    var text_area = $("#code_window");
    $("button#setup").click(function () {
        $(text_area).text("<!DOCTYPE html>" + "\n" + "<html>" + "\n" + "<head>" + "\n\t\n" + "</head>" + "\n" + "<body>" + "\n\t\n" + "</body>" + "\n" + "</html>");
    });
    $("button#add_p").click(function () {
        var txt = $("#code_window").val();
        var new_txt = txt.replace('</body>', '<p>' + '\n' + '</p>' + '\n' + '</body>');
        $(text_area).text(new_txt);
    });
});

Fiddle

edited Oct 9, 2013 at 6:19

answered Oct 9, 2013 at 6:05

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding text to <textarea> via jquery than into HTML

1 Answer 1

Fiddle

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related