Javascript 如何在不覆盖现有元素的情况下向同一类的元素添加新文本？

对不起，我的问题不清楚。 基本上我有以下代码

HTML:

邮递







正文

JQuery：

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

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
$（'ul class=“postFeedElements”>
）。附加到（'.container'）；
$（'.noSelect'）.text（post）；
$（'.newText'）.val（“”）；
});

texarea中的文本输入被传递到相同div元素的新标题中。
当前，当新文本传递到新div时，它会覆盖现有div中的任何现有文本，因为每个标题元素共享同一个类。如何使其在保持同一个类的同时，使每个元素根据textarea中的输入具有不同的文本

---

谢谢，

不用jquery为

选择。noSelect

您可以将新元素保存在变量中，然后使用

.find

在该新元素中查找

。noSelect

。这将只更新您添加的元素，而不是使用class

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

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
var$newEle=$（“
/ul>”）
$newEle.appendTo（'.container'）；
$newEle.find（'.noSelect'）.text（post）；
$（'.newText'）.val（“”）；
});
}

而不是使用jquery为

选择。noSelect

您可以将新元素保存在变量中，并使用

.find

在该新元素中查找

。noSelect

将只更新您添加的元素，而不是使用class

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

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
var$newEle=$（“
/ul>”）
$newEle.appendTo（'.container'）；
$newEle.find（'.noSelect'）.text（post）；
$（'.newText'）.val（“”）；
});
}

/*删除*/
var remove=函数（）{
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parents（'.postFeed'）.remove（）；
});
}
$（文档）.ready（删除）；
var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
var element=$（“
/ul>”）；
元素。appendTo（'.container'）；
要素.文本（员额）；
$（'.newText'）.val（“”）；
});
};
$（文件）.ready（newPost）；

/*删除*/
var remove=函数（）{
$（文档）.on（'单击'，'.remove'，函数（）{
$（this.parents（'.postFeed'）.remove（）；
});
}
$（文档）.ready（删除）；
var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
var element=$（“
/ul>”）；
元素。appendTo（'.container'）；
要素.文本（员额）；
$（'.newText'）.val（“”）；
});
};
$（文件）.ready（newPost）；

---

将文本本身插入选择器中的大字符串中

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

---

将文本本身插入选择器中的大字符串中

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

---

用您的代码替换以下代码：

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

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
$（'ul class=“postFeedElements”>
'+post+'
）.appendTo（'.container'）；
//$（'.noSelect'）.text（post）；
$（'.newText'）.val（“”）；
});
};

---

只需删除“$（'.noSelect'）.text（post）；”并在h4标记之间添加post值

将以下代码替换为您的代码：

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

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
$（'ul class=“postFeedElements”>
'+post+'
）.appendTo（'.container'）；
//$（'.noSelect'）.text（post）；
$（'.newText'）.val（“”）；
});
};

---

只需删除“$（'.noSelect'）.text（post）；”并在h4标记之间添加post值

您只需将正在创建的postfeed div保存到变量中，并将post文本添加到该变量中

我已在下面更新了您的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(" ");
});

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
//将后期提要div保存在变量中
var newHeader=$（'
）。附录（'.container'）；
//更新新创建的div中的文本
newHeader.text（post）；
$（'.newText'）.val（“”）；
});

---

将.text直接添加到类将更新该类的所有div。

您只需将正在创建的postfeed div保存到变量中，然后将post text添加到该变量中即可

我已在下面更新了您的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(" ");
});

var newPost=函数（）{
$（'.btn'）。单击（函数（）{
var post=$（'.newText'）.val（）；
//将后期提要div保存在变量中
var newHeader=$（'
）。附录（'.container'）；
//更新新创建的div中的文本
纽希亚
   $($('.noSelect')[$('.noSelect').length-1]).text(post);
   $($('.noSelect')[$('.noSelect').length-2]).text(post);

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);

/* 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);