在html中使用新的id克隆div的div

我从服务器获取响应，例如json。在html中使用新的id克隆div的div

{ 
"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并使用从服务器接收到的值使用从服务器获取的ID生成新的div。我不想使用jQuery，我知道我可以克隆一个组件，但我不知道如何将值赋给新组件，以及如何设置组件的id。

来源

2014-02-25 Ashok

这将是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为好，否则，你将有重复

来源

2014-02-25 20:48:45 adeneo

在html中使用新的id克隆div的div

回答

相关问题