js动态创建元素并赋值。解决方案
js动态创建元素并赋值。
求代码,求解答:
页面初始化时,动态创建一个div,在div中创建10个 <dl> ,有一个数组,数组中有是个数据,将数组中的数据依次加入到 <dl> <dt> <dd> 中,当然数据都是存在数组中的
实现的结果类似于:
<div>
<dl> 1
<dt> 1.1 </dt>
<dd> 1.1内容 </dd>
</dl>
<dl> 2
<dt> 2.1 </dt>
<dd> 2.1内容 </dd>
</dl>
<dl> 3
<dt> 3.1 </dt>
<dd> 3.1内容 </dd>
</dl>
<dl> 1
<dt> 4.1 </dt>
<dd> 4.1内容 </dd>
</dl>
</div>
------解决方案--------------------
两次循环应该没什么问题
求代码,求解答:
页面初始化时,动态创建一个div,在div中创建10个 <dl> ,有一个数组,数组中有是个数据,将数组中的数据依次加入到 <dl> <dt> <dd> 中,当然数据都是存在数组中的
实现的结果类似于:
<div>
<dl> 1
<dt> 1.1 </dt>
<dd> 1.1内容 </dd>
</dl>
<dl> 2
<dt> 2.1 </dt>
<dd> 2.1内容 </dd>
</dl>
<dl> 3
<dt> 3.1 </dt>
<dd> 3.1内容 </dd>
</dl>
<dl> 1
<dt> 4.1 </dt>
<dd> 4.1内容 </dd>
</dl>
</div>
------解决方案--------------------
两次循环应该没什么问题
- JScript code
function createNewDiv(){ var a = new Array(); var len=-1; //测试数据 while((++len)<10){ a[len].push("title."+len+".1"); a[len].push("content."+len+".1"); } len=-1; var div = document.createElement("div"); div =document.body.appendChild(div); while((++len)<10){ var dl = document.createElement("dl"); dl = div.appendChild(dl); var ltlen=-1; while((++ltlen)<2){ var dt = document.createElement("dt"); dl.appendChild(dt); dt.innerHTML = a[len][ltlen]; } } }
------解决方案--------------------
- JScript code
window.onload = function () { var arr = [ { "Number": "1", "Title": "1.1", "Content": "1.1内容" }, { "Number": "2", "Title": "2.1", "Content": "2.1内容" }, { "Number": "3", "Title": "3.1", "Content": "3.1内容" }, { "Number": "4", "Title": "4.1", "Content": "4.1内容" }, { "Number": "5", "Title": "5.1", "Content": "5.1内容" }, { "Number": "6", "Title": "6.1", "Content": "6.1内容" }, { "Number": "7", "Title": "7.1", "Content": "7.1内容" }, { "Number": "8", "Title": "8.1", "Content": "8.1内容" }, { "Number": "9", "Title": "9.1", "Content": "9.1内容" }, { "Number": "10", "Title": "10.1", "Content": "10.1内容" } ]; var objDiv = document.createElement("div"); objDiv = document.body.appendChild(objDiv); for (var i = 0, l = arr.length; i < l; i++) { var objDl = document.createElement("dl"); objDl.innerHTML = arr[i].Number; var objDt = document.createElement("dt"); objDt.innerHTML = arr[i].Title; var objDd = document.createElement("dd"); objDd.innerHTML = arr[i].Content; objDiv.appendChild(objDl); objDl.appendChild(objDt); objDl.appendChild(objDd); }