Adding text to via jquery than into HTML</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2013-10-09T06:01:52.660" class="fromnow">Oct 09 '13 at 06:01</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2013-10-09T06:19:08.960" datetime="2013-10-09T06:19:08.960">Oct 09 '13 at 06:19</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,524 times"> <span class="fc-light mr2">Viewed</span> 1,524 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="19264291" data-ownerid="2566858" data-score="2"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="19264291"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="2">2</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I've been trying to get this idea I had together for a simple project i'm working on.</p> <p>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 <code><p></code> tag it'll be added in the body however, when I'm adding the <code><title></code> it will be under the head.</p> <p>The problem I'm running into is that I've figured out how to get the "tags" into the textarea using it's <code>.val()</code> 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.</p> <p>here's what I have so far for the jQuery...</p> <pre><code>$(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>"); }); }); </code></pre> <p>and here's everything together..</p> <p><a class="external-link" href="http://jsfiddle.net/fHg8H/" rel="nofollow">http://jsfiddle.net/fHg8H/</a></p> <p>Anything you could contribute would be appreciated.</p> <p>Thanks!</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Oct 09 '13 at 06:08">edited Oct 09 '13 at 06:08</time> <a href="../../users/1846192/mathijs-flietstra" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1846192.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mathijs Flietstra" /> </a> <div class="s-user-card--info"> <a href="../../users/1846192/mathijs-flietstra" class="s-user-card--link">Mathijs Flietstra</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">12,900</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="38 silver badges">38</li> <li class="s-award-bling s-award-blingbronze" title="67 bronze badges">67</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 09 '13 at 06:01">asked Oct 09 '13 at 06:01</time> <a href="../../users/2566858/ryanhagz" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2566858.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="ryanhagz" /> </a> <div class="s-user-card--info"> <a href="../../users/2566858/ryanhagz" class="s-user-card--link">ryanhagz</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">193</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badge">2</li> <li class="s-award-bling s-award-blingbronze" title="15 bronze badge">15</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-19264291" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="19264291" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-28520286" class="comment js-comment " data-comment-id="28520286" data-comment-owner-id="1578811" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment28520286_19264291"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">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.</span> – <a href="../../users/1578811/dhaval-bharadva" title="3,053 reputation" class="comment-user ">Dhaval Bharadva</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/19264291/adding-text-to-textarea-via-jquery-than-into-html#comment28520286_19264291"><span title="2013-10-09T06:16:37.827 License: CC BY-SA 3.0" class="relativetime-clean">Oct 09 '13 at 06:16</span></a></span> </div> </div> </li> <li id="comment-28520641" class="comment js-comment " data-comment-id="28520641" data-comment-owner-id="1846601" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment28520641_19264291"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Try below link : [http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery][1] [1]: http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery</span> – <a href="../../users/1846601/nirmal" title="924 reputation" class="comment-user ">Nirmal</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/19264291/adding-text-to-textarea-via-jquery-than-into-html#comment28520641_19264291"><span title="2013-10-09T06:30:36.687 License: CC BY-SA 3.0" class="relativetime-clean">Oct 09 '13 at 06:30</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="19264344"></a> <div id="answer-19264344" class="answer accepted-answer" data-answerid="19264344" data-ownerid="2256325" data-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="19264344"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I would use <a class="external-link" href="http://api.jquery.com/text/" rel="nofollow"><strong>.text()</strong></a>. Try this:</p> <pre><code>$(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); }); }); </code></pre> <h2><a class="external-link" href="http://jsfiddle.net/bemPK/1/" rel="nofollow"><strong>Fiddle</strong></a></h2></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2013-10-09T06:19:08.960" class="relativetime">Oct 09 '13 at 06:19</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Sergio</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 09 '13 at 06:05">answered Oct 09 '13 at 06:05</time> <a href="../../users/2256325/sergio" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2256325.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Sergio" /> </a> <div class="s-user-card--info"> <a href="../../users/2256325/sergio" class="s-user-card--link">Sergio</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">28,539</li> <li class="s-award-bling s-award-blinggold" title="11 gold badges">11</li> <li class="s-award-bling s-award-blingsilver" title="85 silver badges">85</li> <li class="s-award-bling s-award-blingbronze" title="132 bronze badges">132</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/39390521/how-do-i-make-domain-parking-on-my-website-without-accessing-or-adding-them-to" class="question-hyperlink">How do i make domain parking on my website without accessing or adding them to my Cpanel</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>