使用 JQuery 制作 html 附加变量

Question

我有一个带有按钮的 textarea，当我单击提交按钮时，此 textarea 的内容会插入 <p>，但是当我在 textarea 中单击提交 2 次或更多次其他文本时，新文本会替换旧文本在较旧的<p> 之前。我不想这样做，我想用 textarea 的新文本创建新 p，而不用新文本替换旧 p 标签中的旧文本。每个 p 插入一个旋转木马，但这并不重要。

这是我的代码：

初始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>

带有按钮的文本区域：

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

javascript代码：

$(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'
  });
}); 

});

新p标签的脚本模板：

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

Answer 1

更新答案

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'
        //});
    }); 
});    

*我注释掉了 jCarousel 代码，因为它会抛出错误。

原答案

使用 append() 代替 html()

改变

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

到

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