如何在不覆蓋現有元素的情況下向同一類的元素添加新文本？

Question

對不起，如果我的問題不清楚。 基本上我有以下代碼

HTML：

<div class="container"> 
     <textarea class="newText" placeholder="Have something to say?"></textarea> 
     <button class="btn btn-default btn-sm">Post</button> 
    </div> 
<div class="main"> 
    <div class="postFeed"> 
     <ul class="postFeedElements"> 
      <li> 
       <ul class="iconList pull-right"> 
        <li> <span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove"></span> 

        </li> 
       </ul> 
       <li> 
        <h4 class="noSelect"> Text</h4> 

       </li> 
     </ul> 
    </div> 
</div> 

JQuery的：在texarea

var newPost = function() { 
$('.btn').click(function() { 
    var post = $('.newText').val(); 
    $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>').appendTo('.container'); 
    $('.noSelect').text(post); 
    $('.newText').val(" "); 
}); 

http://jsfiddle.net/r8umr1m3/

文本輸入被傳遞到一個相同的div元素的一個新的標題。
當新文本傳遞給新div時，它會覆蓋現有div中的任何現有文本，因爲每個標題元素共享相同的類。我怎麼做到這一點，所以每個元素都有不同的文本基於textarea中的輸入，同時仍然保持相同的類？

感謝，

Answer 1

插入你的選擇有很大的字符串內文本本身

'....<h4 class="noSelect">'+post+'</h4> ....' 

，並刪除

$('.noSelect').text(post); 

DEMO

Answer 2

而不是使用jQuery來選擇.noSelect您可以保存新的元素一個變量，使用.find內找到新元素.noSelect的。這將只更新元素添加的所有元素，而不是與noSelect類：

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(); 
     var $newEle = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>') 
     $newEle.appendTo('.container'); 
     $newEle.find('.noSelect').text(post); 
     $('.newText').val(" "); 
    }); 
} 

Answer 3

/* remove */ 
var remove = function() { 
    $(document).on('click', '.remove', function() { 
     $(this).parents('.postFeed').remove(); 
    }); 
} 
$(document).ready(remove); 

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(); 
     var element = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>'); 
     element.appendTo('.container'); 
     element.text(post); 
     $('.newText').val(" "); 
    }); 
}; 
$(document).ready(newPost); 

DEMO

Answer 4

替換下面的代碼與你：

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(); 
     $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right">    <li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect">'+post+'</h4></li></ul></div>').appendTo('.container'); 
     //$('.noSelect').text(post); 
     $('.newText').val(" "); 
    }); 
}; 

只是刪除 「$（ 'noSelect'）文本（崗位）;」並添加值後你們之間H4標籤

Answer 5

你只需要保存您正在創建成一個變量和postfeed DIV和後的文本添加到該變量。

我有更新下面的jQuery代碼： -

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(); 
     // Save the post feed div in a variable 
     var newHeader = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>').appendTo('.container'); 
// update the text in the newly created div 
     newHeader.text(post); 
     $('.newText').val(" "); 
}); 

添加.TEXT直接到類將更新所有與類的div。

Answer 6

Here是校正。基本上你需要將創建的div作爲一個變量，並添加新的文本。

這裏是JavaScript：

的 $('.noSelect').text(post);

/* remove */ 
var remove = function() { 
    $(document).on('click', '.remove', function() { 
     $(this).parents('.postFeed').remove(); 
    }); 
} 
$(document).ready(remove); 

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(); 
     // get the new div as a variable 
     var newDiv = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right">    <li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>'); 

     // append the new div 
     newDiv.appendTo('.container'); 

     // set the text to this new div 
     newDiv.text(post); 
     $('.newText').val(" "); 
    }); 
}; 
$(document).ready(newPost); 

Answer 7

這一翻譯，你可以選擇最後和元素的最後一前設置。

$($('.noSelect')[$('.noSelect').length-1]).text(post); 
    $($('.noSelect')[$('.noSelect').length-2]).text(post); 

https://jsfiddle.net/mrv9tr83/

希望能解決你的問題

Answer 8

它的成本更低，資源的角度來看，操縱和它連接到DOM之前修改的新內容。

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(), 
      newContent = $('<div class="postFeed"><ul class="postFeedElements"><li><ul class="iconList pull-right"><li><span class="remove glyphicon glyphicon-remove" data-toggle="tooltip" data-placement="right" title="Remove Post"></span></li></ul><li><h4 class="noSelect"></h4></li></ul></div>'); 

     $('.noSelect', newContent).text(post); //manipulate detached content 
     $('.container').append(newContent); //attach content 
     $('.newText').val(" "); 
    }); 
}; 
$(document).ready(newPost); 

Answer 9

您不需要在javascript中編寫整個html，因爲它已經在html中。使用clone（）獲取現有的html。之後再根據容器的div更新最後noselect文本

腳本

/* remove */ 
var remove = function() { 
    $(document).on('click', '.remove', function() { 
     $(this).parents('.postFeed').remove(); 
    }); 
} 

$(document).ready(remove); 

var newPost = function() { 
    $('.btn').click(function() { 
     var post = $('.newText').val(); 
     var clone = $(".main > .postFeed").clone(); 
     $(".container").append(clone); 
     $('.container .noSelect').last().text(post); 
     $('.newText').val(" "); 
    }); 
}; 

$(document).ready(newPost);