Make html append variable with JQuery

Question

I have a textarea with a button, the content of this textarea inserts in a <p> when i click submit button, but when i click submit 2 or more times with another text in the textarea, the new text REPLACES old text in the older <p> makes before. I don't want to do this, i want to make new p with the new text of textarea without replacing the old text in the old p tags with the new text. Each p inserts in a carrousel, but it's doesn't matter.

This is my code:

The initial p:

<div class="jcarouselbtext"  data-jcarousel="true">
  <ul class="popupbtext">
    <li><p class="info1">oLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></li>
  </ul>
</div>

The textarea with the button:

<textarea id="textarea"></textarea>
  <input type="button" id="getvalue" value="Enviar texto" class="demobutton">

The javascript code:

$(function () {
  $('#getvalue').click(function(){
    var textarea_value = $('#textarea').val();
    $('.show-textarea-value').html(textarea_value);
    var $btext = $('.popupbtext');
    var template = $('#template3').html();
    $btext.append(template);
    $('.jcarouselbtext').jcarousel('reload', {
    animation: 'slow'
  });
}); 

});

The script template for the new p tags:

<script id="template3" type="text/template">
  <li><p  class="info1 show-textarea-value"></p></li>
</script>

VtoCorleone · Accepted Answer · 2014-04-02 15:27:50Z

1

Updated Answer

Here's a fiddle with what I think you're looking for

$(function(){
    $('#getvalue').click(function(){
        // Get the text area value
        var textarea_value = $('#textarea').val();

        // Get a jQuery object of the template html
        var templateHolder = $($('#template3').html());

        // Put the text area text inside of the template's <p> tag 
        // Use .html() to overwrite the old content with the new 
        // content every time
        templateHolder.find('p').html(textarea_value);

        // Get a reference to the <ul> element
        var $btext = $('.popupbtext');

        // Add the template (with text area text) to the <ul> element
        $btext.append(templateHolder);

        // Commented out because it was throwing errors.  
        // Left in because it was part of original fiddle
        //$('.jcarouselbtext').jcarousel('reload', {
        //    animation: 'slow'
        //});
    }); 
});

*I commented out the jCarousel code because it was throwing errors.

Original Answer

Use append() instead of html()

Change

$('.show-textarea-value').html(textarea_value);

to

$('.show-textarea-value').append(textarea_value);

edited Apr 2, 2014 at 15:27

answered Apr 2, 2014 at 14:15

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

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

6 Comments

Pedro Corchero Murga Over a year ago

Okay this not replace the old with the new text, but ADD the new text to the OLD text, i only want to make a new p, without touching the old tags.

VtoCorleone Over a year ago

Can you create a fiddle/plunkr for it? I'm a little confused with what you're asking now.

Pedro Corchero Murga Over a year ago

I maked this but i don't know why this don't work: jsfiddle.net/X4fDN/8 When you write text in the textarea and click send it must to make new li with the text that you have entered in the textarea.

Pedro Corchero Murga Over a year ago

I think that your answer it's can be valid if my ids are not the same, if when i click the submit button if creates a new id, for example, newid1, click again and newid2... if could be work, but i don't know how to do, check this fiddle, i want to apply it to my code: jsfiddle.net/QaB76

VtoCorleone Over a year ago

I updated my answer. I hope that is what you were looking for.

|

Collectives™ on Stack Overflow

Make html append variable with JQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related