Jquery-在换行符后添加项目符号

Question

我有一个文本区，当你添加内容时，它会自动添加项目符号，问题是当一个新的行被添加时，它应该添加单独的ullet点。问题是它的内容完全附加了

下面是我如何添加内容

应该是这样的

下面是片段

null

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
        
<div class="jcarouselbtext"  data-jcarousel="true">
    <ul  class="popupbtext">
        <li>
            <p  class="info1">First bullet point</p>
        </li>
    </ul>
</div>
    
<script id="template3" type="text/template">
     <li>
         <p  class="info1 show-textarea-value"></p>
     </li>
</script>

null

Answer 1

尝试根据新行拆分文本，并将它们作为新列表项添加到popupbtext元素中

null

$(function(){
    $('#getvalue').click(function(){
        // Get the text area value
        var textarea_value = $('#textarea').val();
        
        var lines = textarea_value.split('\n'); //Split the text content based on new line and iterate through each line then add them as seperate list item
        
        lines.forEach(function(line){
        
        // 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(line);
        
        // 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'
        //});
    }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<br/>
<input type="button" id="getvalue" value="Send text" class="demobutton">
        
<div class="jcarouselbtext"  data-jcarousel="true">
    <ul  class="popupbtext">
        <li>
            <p  class="info1">First bullet point</p>
        </li>
    </ul>
</div>
    
<script id="template3" type="text/template">
     <li>
         <p  class="info1 show-textarea-value"></p>
     </li>
</script>