Question

我从服务器获得json响应，例如

{
"data": [
{
    "id": "123",
    "name": "Tree",
    "category": "Green"
},
{
    "id":"456",
    "name":"Paper",
    "category":"Green"
},
{
    "id":"789",
    "name":"Polybag",
    "category":"Red"
}
],
"string": "Hello World"
}

在我的HTML中，我有一个像这样的div ..

<div class="pageHeader">
            <div id="pageInfo">
                <div id="pageNameBox">
                    <p><span class="title">Name:</span><label id="pageName">Tree</label></p>
                </div>
                <div id="pageCatBox">
                    <p><span class="title">Category:</span><label id="pageCat">Green</label></p>
                </div>
            </div>
            <div id="expandCollapseButton">
                <input type="button" name="excoll" value="Expand" class="fbButton">
            </div>
        </div>

现在根据我从服务器收到的项目数量，在这种情况下3，我想克隆这个div并使用从服务器收到的值来生成一个新的div，其中包含我们从服务器获取的id。我不想使用jQuery，我知道我可以克隆一个组件，但我不确定如何给新组件赋值，以及如何设置组件的id。

Answer 1

那将是cloneNode，而且非常简单，就像

var elem = document.getElementById('pageHeader'); // get an element

var clone = elem.cloneNode(true);// clone it,"true" is a deep clone with children

clone.id = 'the_new_id'; // give it a new ID

parent.appendChild(clone); // put it somewhere

请注意，您也应该更改所有孩子的ID，否则您将有重复

使用带有新id的javascript克隆html中的div

1 个答案: