利用JQuery动态生成html元素

JQuery动态操作htmlAPI介绍

JQuery官方文档中动态对html添加元素有如下四个方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

具体是什么效果可以自己去试一试，链接如下：http://www.w3school.com.cn/jquery/jquery_dom_add.asp

应用JQuery动态操作html的效果图

后端返回的JSON数据

  var navList =[   
   {
      tit: "测试title1",
      content: [
        {
          name: "标题1",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题2",
          url: "xxxxxxxx"
        },
        {
          name: "标题3",
          url: "xxxxxxxx"
        },
        {
          name: "标题4",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题5",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题6",
          url:
            "xxxxxxxx"
        }
      ]
},
 {
      tit: "测试title1",
      content: [
        {
          name: "标题1",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题2",
          url: "xxxxxxxx"
        },
        {
          name: "标题3",
          url: "xxxxxxxx"
        },
        {
          name: "标题4",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题5",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题6",
          url:
            "xxxxxxxx"
        }
      ]
    },
 {
      tit: "测试title1",
      content: [
        {
          name: "标题1",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题2",
          url: "xxxxxxxx"
        },
        {
          name: "标题3",
          url: "xxxxxxxx"
        },
        {
          name: "标题4",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题5",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题6",
          url:
            "xxxxxxxx"
        }
      ]
    },
 {
      tit: "测试title1",
      content: [
        {
          name: "标题1",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题2",
          url: "xxxxxxxx"
        },
        {
          name: "标题3",
          url: "xxxxxxxx"
        },
        {
          name: "标题4",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题5",
          url:
            "xxxxxxxx"
        },
        {
          name: "标题6",
          url:
            "xxxxxxxx"
        }
      ]
    },
]；

 渲染后的效果

 实现代码如下

	  var dataList = "";
	  var tempData = "";
	  var totalStr = "";
	  //组装数据
	  for(var i=0; i < navList.length; i++)
	  {
		  debugger;
		  tempData = '<div class="fi-panel1-panel-item"><h3 class="fi-panel1-panel-item-tit">'+navList[i].tit+'</h3>'
						+'<ul class="fi-panel1-panel-item-content">';
		  for(var j=0; j <navList[i].content.length; j++)
		  {
			  tempData +='<li class="fi-panel1-panel-item-content-item"><a href="'+navList[i].content[j].url+'">'+navList[i].content[j].name+'</a></li>';
		  }
		  tempData +='</ul></div></div>,';
		  totalStr +=tempData;				
	  }
	  dataList = totalStr.split(",");
	  //展示数据
	  for(var k=dataList.length; k >=0; k--)
	  {
			console.log(dataList[k]);
			$(".fi-panel1-panel-wrap").prepend(dataList[k]);
			debugger;
	  }

动态添加的就是如下的html元素