首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js动态创建元素并赋值。解决方案

2012-04-25 
js动态创建元素并赋值。求代码,求解答:页面初始化时,动态创建一个div,在div中创建10个 dl ,有一个数组,数

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>




[解决办法]
两次循环应该没什么问题

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);            } 


[解决办法]
<div id="content"></div>
var arr = new Array();
arr.push("A");
arr.push("B");
arr.push("C");
var tempHtml="<div>";
for(var i=0;i<arr.length;i++){
tempHtml+='<dt>"+arr[i]+"</dt>';
}
tempHtml+="/<div>";

document.getElementById("content").innerHTML=tempHtml;

直接写的!未经测试!可试试!



热点排行