Javascript 根据JSON键的数量添加html元素

我正在编写一段代码，其中我希望根据JSON键：值对的数量生成

span

和

textarea

元素

这是我的html：

<div class="modal fade" id="addPropertyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add Property</h4>
            </div>
            <div class="modal-body">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon">Name</span>
                    <input type="text" id="newProperty"  name="newProperty" class="form-control" placeholder="name">
                    </div>
                    <br/>
                    **<div class="input-group input-group-lg">
                        <span class="input-group-addon">Value</span>
                        <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
                    </div>**
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="submit" id="savePropertyBtn" name="action" value="Save Property" class="btn btn-primary"/>
                    <input type="submit" id="updatePropertyBtn" name="action" value="Update Property" class="btn btn-primary"/>
                </div>
            </div>
        </div>
    </div>
</div>

我修改了脚本以从JSON中获取各个值

我的想法是：在读取JSON值时增加

计数

，然后使用它通过迭代在html中添加

计数

span&

文本区域

元素的数量。此外，我还想在html中添加计数并将其隐藏，这样我也可以在

请求

对象中获得计数（我将创建一个带有数值的映射）

请帮我实现我的想法

编辑：如果JSON包含两对，则这是预期的结果

<div class="input-group input-group-lg">
    <span class="input-group-addon">Value</span>
    <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
    <span class="input-group-addon">Value</span>
    <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
</div>

---

您必须首先获取

div

，然后调用其上的

append

函数。例如，如果您执行了

$（“.input group”）

，则会提供一个包含所有html元素的列表，其中类为

input group

（请注意选择器中类名之前的句点）。记住，类不能保证唯一，所以我的示例只有在您只使用该类一次的情况下才是唯一的。一旦获得所需的元素，就可以操纵该元素。在本例中，您希望将HTML元素添加到

div

$(".input-group").append("<span>Sample html string</span>");

$（“.input group”）.append（“示例html字符串”）；

参考资料：

• 用于追加的文档：
• CSS选择器“游乐场”（带文档）：

---

复制-使用

jQuery

function copyDiv(divId) {
    var content = $(divId).html();
    var newdiv = $('<div>');
    newdiv.html(content);
    $(divId).after(newdiv);
    return newdiv;
}

---

听起来你已经知道怎么做了，为什么不试试呢？然后，如果您有一些特定的问题，请回到这里提问。不要先计数然后再添加计数元素，而是在计数循环中添加这些元素。警告：确保您在生成的所有文本区域中使用相同的ID。如果您需要它们具有公共标识符，请改用类。HTML ID必须是唯一的。@原谅我知道我想做什么，但我不知道怎么做。我对jQuery非常陌生，这就是我想知道的。我不知道如何添加它。我有多个div使用同一个类。我可以用一个id或名字来引用div吗？是的。查看我在答案中包含的第二个链接。当你使用选择器时，它有很多不同的选项。如果你想学习jQuery，你真的需要学习CSS选择器。是的，我可以使用id:）添加，但问题是，每次调用js时，它都会追加。当然，每次调用它时，它都会追加。你期望它做什么？如果您想让它检查您正在添加的元素是否已经存在，则需要编写代码进行检查。有一个项目列表，单击该列表将打开一个对话框。在该对话框中，这是一个div标记。但每次我点击一个元素时，它都会不断追加。我想这会解决的。。“我会尽力回复你的。”维丘好吧，如果答案可行，也许你可以接受并投票表决。

$(".input-group").append("<span>Sample html string</span>");

function copyDiv(divId) {
    var content = $(divId).html();
    var newdiv = $('<div>');
    newdiv.html(content);
    $(divId).after(newdiv);
    return newdiv;
}

for (i in json) {
    var newdiv = copyDiv('#form-div-id');
    ...    // add values to new div like 'i' and json[i]
}