Javascript 如何使用keypress jquery在单个div中追加多个父div和子div

我正在开发一个系统，其中的主要要求是用户按下添加更多的按钮，用户将填写其中的数据。然后再添加更多的数据

我真正需要做的是嵌入第一个添加更多数据，第二个使用按键事件在一个div中添加更多数据

例如

用户开始在第一个add more的第一个文本字段中写入，然后在第一个add more的第二个文本字段中写入，因此它应该将此数据嵌入一个名为：one的div中

用户开始在第二个添加更多的第一个文本字段中写入，然后在第二个添加更多的第二个文本字段中写入，因此它应该将此数据嵌入一个名为：two的div中

最后，我想在一个div中嵌入一个和两个div

问题:

它不会在final div中递归地包含和嵌入字段，也不会像预期的那样使用keypress

Als返回错误<代码>$（…）。文本（…）。追加不是函数。这是最后一行代码

Jquery代码：

children_container = $('<div/>', {'class': 'children_new_package_itineraries_container'});

if (children_container.length > 0) {

    $("#day_new_package_itineraries_field").on('keypress change', function () {
        $('<div/>', {
            'class': 'day_new_package_itineraries_container',
            'html': $(this).val()
        });
    });

    $("#title_new_package_itineraries_field").on('keypress change', function () {
        $('<div/>', {
            'class': 'title_new_package_itineraries_container',
            'html': $(this).val()
        });
    });

    children_container.append($(".day_new_package_itineraries_container").text().append($(".title_new_package_itineraries_container").val()));

    $(".preview_container").html(children_container);

}

children\u container=$（''，{'class'：'children\u new\u package\u investures\u container'}）；
如果（子容器长度>0）{
$（“#天#新(套餐)行程(字段)”）。on（'keypress change'，function（）{
$('', {
“类”：“日\新\套餐\行程\集装箱”，
'html'：$（this.val（））
});
});
$（“#title_new_package_investures_field”）。在（'keypress change'，function（）{
$('', {
“类”：“标题、新包装、行程、容器”，
'html'：$（this.val（））
});
});
children_container.append（$（“.day_new_package_investures_container”）.text（）.append（$（“.title_new_package_investures_container”）.val（））；
$（“.preview_container”）.html（儿童_container）；
}

期望输出：

<div class="preview_container">

  <div class="children_1493016690115_container">
    <div class="day_1493016690115_container">Day: 123</div>
    <div class="title_1493016690115_container">Title: xyz</div>
  </div>

  <div class="children_1493016960131_container">
    <div class="day_1493016960131_container">Day: 123</div>
    <div class="title_1493016960131_container">Title: xyz</div>
  </div>

</div>

日期：123
标题：xyz
日期：123
标题：xyz

---

附言：我动态地处理这些值，所以这不是我如何动态地处理这些输入的问题

您可以在创建元素的位置追加

children\u container=$（''，{'class'：'children\u new\u package\u investures\u container'}）；
如果（子容器长度>0）{
$（“#天#新(包)行程(字段)”）。在（'keypress change'，function（）{
if（$（“.day\u new\u package\u internations\u container”）.长度）{
$（“.day\u new\u package\u investures\u container”）.html（$（this.val（））；
}否则{
children_container.html（$（''）{
“类”：“日\新\套餐\行程\集装箱”，
'html'：$（this.val（））
}));
}
});
$（“#title_new_package_investures_field”）。在（'keypress change'，function（）{
if（$（“.title\u new\u package\u internations\u container”）.长度）{
$（“.title\u new\u package\u investures\u container”）.html（$（this.val（））；
}否则{
子容器。附加（$（''）{
“类”：“标题、新包装、行程、容器”，
'html'：$（this.val（））
}));
}
});
$（“.preview_container”）.html（儿童_container）；
}

您只是在创建元素，而不是

.append（）

添加元素。我尝试了添加元素，但没有效果。你能帮我修一下吗？：）我无法获得正确的结果。在选择器中构造它时，您需要显示它，如下所示：

$（“
我的新文本”
”）。附录（“正文”）-check jQuery已尝试，但仍不起作用：（按您的方式使用append的缺点是，它不会从字段中删除现有文本。如果用户删除整个文本或尝试向现有文本添加更多文本，则应将整个文本作为值。我已经尝试过：）然后你应该使用.html而不是appender。它们是两个不同的字段。使用html删除第一个或第二个字段数据：）我已经尝试了所有这些方法。：）似乎工作不太好。是的，我已经根据我的要求对其进行了调整，但我的问题仍然是使其能够像我原来的问题一样工作：添加更多和嵌入）