Javascript 如何从输入框中提取文本并将其添加到底部的div中

我有一小块html，它有两个输入框和一个带有按钮Add的复选框，如下所示：

<div class="row">
            <div class="form-group col-xs-4">
                <input type="text" class="form-control" id="items" name="items" placeholder="Enter item description">
            </div>
            <div class="form-group col-xs-3">
                <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
            </div>
            <div class="form-group">
                <div class="form-group col-xs-3">
                    <div class="form-group">
                        <div class="checkbox">
                            <input type="checkbox" id="in-order" name="in-order">
                        </div>
                    </div>
                </div>
                <div class="form-group col-xs-2">
                    <div class="btn btn-primary" id="add-btn">Add</div>
                </div>
            </div>
        </div>

     <div id="persisted-items"></div>

请帮忙

---

谢谢。

简单的javascript:

看小提琴

添加
函数add（）{
var按钮=document.getElementById（“输入”）.value；
如果（按钮==null | |按钮==“”）{
返回false；
}
document.getElementById（“按钮”）.innerHTML=按钮；
}

添加jquery链接并将click事件移动到ready中

$(document).ready(function(){
$('#add-btn').click(function(){
$("#persisted-items").append($("#items").val());
$("#persisted-items").append($("#quantity").val());
$("#persisted-items").append($("#in-order").val());
});
});

---

你在找这样的东西吗

$（文档）.ready（函数（）{
$（'#添加btn'）。单击（函数（）{
var newHtml='Items:'+$（“#Items”）.val（）+'，数量：'+$（“#数量”）.val（）+'，顺序：'+$（“#顺序”）.val（）+'Delete'；
$（“#保留项”）.append（newHtml）；
美元（“#项目”）.val（“”）；
美元（“#数量”）.val（“”）；
});
$（文档）.on（'单击'，'.deleteBtn'，函数（）{
$（this.parent（'div'）.remove（）；
});
});

添加
这里有一个JSFIDLE：显示信息并删除它们

我添加了一个删除节点的函数：

function removeNode(nodeId) {
    document.getElementById("item"+nodeId).remove(); 
};

并且，当您显示来自用户的数据时，我添加了对该方法的调用：

var counter = 0;
$('#add-btn').click(function(){
    $("#persisted-items").append("<div id='item"+counter+"'><span onclick='removeNode("+counter+")'>[ delete ]</span> "+  $("#items").val() + " - " + $("#quantity").val() + " - " + $("#in-order").val() +" </div>");
    counter++;
});

var计数器=0；
$（'#添加btn'）。单击（函数（）{
$（“#保留项”）。追加（“[删除]”+$（“#项”）.val（）+“-”+$（“#数量”）.val（）+“-”+$（“#按顺序”）.val（）+”；
计数器++；
});
在尝试了您所尝试的东西之后，您最终在哪里结束了？我看不出您的代码有任何问题，您有什么问题吗？我知道代码没有任何问题。我想将删除功能添加到现有代码中。另外，还有没有其他方法可以消除重复。将其添加到一行代码中？仅供参考：此处提供了无jQuery版本：
function removeNode(nodeId) {
    document.getElementById("item"+nodeId).remove(); 
};

var counter = 0;
$('#add-btn').click(function(){
    $("#persisted-items").append("<div id='item"+counter+"'><span onclick='removeNode("+counter+")'>[ delete ]</span> "+  $("#items").val() + " - " + $("#quantity").val() + " - " + $("#in-order").val() +" </div>");
    counter++;
});