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

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，否则将会出现重复项