`
xiuying
  • 浏览: 537699 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

动态生成DIV/UL/LI

    博客分类:
  • web
J# 
阅读更多
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.ul1{
margin:0px;
padding:0px;
height:28px;
border-left:1px solid #000000;
}
.li1{
width:12%;
height:28px;
line-height:28px;
vertical-align:middle;
text-align:center;
float:left;
list-style-type:none;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
}

.divcss{
font-size:12px;
height:auto;
width:auto;
margin:0px;
padding:0px;
}
.lititlecss
{
    width:12%;
height:28px;
line-height:28px;
text-align:center;
vertical-align:middle;
float:left;
margin:0px;
padding:0px;
list-style-type:none;
background-color:#CCCCCC;
border-right:1px #000000 solid;
border-bottom:1px #000000 solid;
border-top:1px #000000 solid;
}
.ulcss{
margin:0px;
padding:0px;
height:28px;
border-left:1px #000000 solid;

}
</style>
</HEAD>

<BODY>
<div id="divs">
<ul ID="ss" class="ulcss">
<li class="lititlecss">序号</li>
<li class="lititlecss">名字</li>
<li class="lititlecss">性别</li>
<li class="lititlecss">年龄</li>
</ul>
</div>

</BODY>
<script language="javascript">
function createDiv(){
// var divs = document.createElement("DIV");     //动态创建DIV
var divs = document.getElementById("divs");
divs.className="divcss";
for(var j=0;j<3;j++){
var uu ="ul"+j ;
uu = document.createElement("UL");
uu.className="ul1";
for(var i=0;i<4;i++){
var ll = "li" +i;
var ll = document.createElement("LI");
ll.className="li1";
ll.innerText="222"+i;
uu.appendChild(ll);
}
divs.appendChild(uu);
}
divs.id="newDiv";
document.body.appendChild(divs);
}
createDiv();
</script>
</HTML>
分享到:
评论

相关推荐

    jQuery生成SKU表格实例代码.zip

    &lt;div class="demo-title"&gt;淘宝商户端发布商品时,动态生成SKU表格的实例&lt;/div&gt; &lt;ul class="SKU_TYPE"&gt; &lt;li is_required='1' propid='1' sku-type-name="存储"&gt;*&lt;/em&gt;存储:&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;&lt;label&gt;&lt;...

    jquery无法为动态生成的元素添加点击事件的解决方法(推荐)

    (&lt;li&gt;中间的元素是动态生成的), 现在想为添加点击事件, 例子如下: &lt;div&gt; &lt;ul&gt; &lt;li&gt; 这是元素内容&lt;/i&gt; //i是动态生成 &lt;/span&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; 解决方法如下: $[removed]('click', '.icon', ...

    ASP.Net电子商务网站后台模板

    &lt;li id="now19"&gt;生成文件管理" href="#" target="content3"&gt;生成文件管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1a"&gt;标签管理" href="#" target="content3"&gt;标签管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1b"&gt;模板管理" onclick=...

    jquery html动态添加的元素绑定事件详解

    假设我们要给ul动态添加的&lt;li&gt;绑定click事件形成如下结果 &lt;div id=testdiv&gt; &lt;ul&gt; &lt;li name=apple&gt;apple&lt;/li&gt; &lt;li name=pear&gt;pear&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; [removed] function test(name){ alert&#40;I'm +name&#41...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者...需要给&lt;ul&gt;里面动态添加的&lt;li&gt;标签添加click事件   jquery 1.7版以前使用live

    zen coding for editplus 实例代码说明

    比如他输入: ...复制代码代码如下: &lt;div id=”page”&gt; &lt;div id=”header”&gt; &lt;ul id=”nav”&gt; &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id=”page”&gt; &lt;

    js以及jquery实现手风琴效果

    最近又复习了jQuery的知识,既然...div布局:注意哦,里面的图片我们用js代码生成 &lt;div id=box&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; css样式: &lt;style type=text/c

    使用vue制作滑动标签

    先写一个你需要展示的静态效果,写好后再改为VUE动态生成,代码如下: &lt;div id=app1 class=wrap&gt; &lt;ul class=tabs&gt; &lt;li class=active&gt;标签1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;标签2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;标签3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div ...

    HTML5可视化音频波纹音乐播放器代码.zip

    &lt;...&lt;li&gt;&lt;a &gt;&lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h1 itemprop="name"&gt;Demo&lt;/h1&gt; &lt;/div&gt; 这是一款带音频波纹的可视化音乐播放器特效,HTML5网页音乐播放器代码。

    satisfy:从CSS选择器生成HTML

    / div &gt; 您可以使用属性选择器和数字psuedo类进一步操纵生成的结构: satisfy ( 'ul li:5 span[innerHTML="item"]' ) ; 这将产生以下结果: &lt; ul&gt; &lt; li&gt; &lt; span&gt; item &lt;/ span&gt; &lt;/ li&gt; &lt; li&gt; &lt; span&gt; item &lt;/ span&gt;...

    静态家具网页

    &lt;div class="main"&gt; &lt;!-- header --&gt; &lt;p&gt;&nbsp;&lt;/p&gt; &lt;td width="120" height="30"&gt;&lt;strong&gt;主 页 &lt;/a&gt;&lt;/strong&gt;| &lt;/td&gt; &lt;td width="120" height="30"&gt;&lt;strong&gt;特 色&lt;/a&gt; &lt;/strong&gt; | ...

    vue-i18n-tool:轻松对Vue组件进行国际化处理,自动生成多语言配置文件

    vue-i18n-工具vue多语言自动生成工具轻松对Vue组件进行国际化处理,自动生成多语言配置文件,并通过百度翻译进行自动翻译演示cd ./samplenode ./scripts/i18n.js生成格式处理前&lt; template&gt; &lt; div xss=removed&gt; 基本...

    angularjs表格分页功能详解

    1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。 &lt;div class=pagination&gt; &lt;ul xss=removed&gt; &lt;li id=previous&gt;上一页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;!--用于页标的显示 --&gt; ...

    详解vuex的简单todolist例子

    1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 &lt;div class=hello&gt; &lt;input type=text&gt; &lt;button&gt;增加事项&lt;/button&gt; &lt;ul&gt; &lt;li&gt;item&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/...

    纯 CSS 实现点击展开阅读全文功能

    参考了文章 caibaojian.com/css-tonggle… 的纯 CSS 的想法, 但文章描述的内容适用于单篇文章的效果, 而在使用 &lt;li&gt;&lt;/li&gt; 标签生成表数据的情况下并不友好, 所以在此基础上进行了相对应的优化, 具体代码如下: ...

    flat-html:编写未嵌套的html

    平面html flat-html是替代模板并生成复杂HTML的替代方法。 您编写了一系列有关每个元素应设置为什么的语句。 如{ "data": [ "-h1 =My post", "^ul li = I ... &lt;div&gt; &lt;h1&gt;My post&lt;/h1&gt; &lt;ul&gt; &lt;li&gt; I am list item 1&lt;/li&gt;

    bug解决思路.txt

    &lt;li ms-repeat="datalist"&gt;&lt;p&gt;&lt;span&gt;{{el.id}}&lt;/span&gt;&lt;span &gt;{{el.name}}&lt;/span&gt;&lt;/p&gt;&lt;/li&gt; &lt;/ul&gt; &lt;!--//数据--&gt; &lt;div id="yema" &lt;/div&gt; &lt;/div&gt; [removed] var yema=document.getElementById("yema"); ...

    js实现瀑布流效果(自动生成新的内容)

    当滚动条接近底部会自动生成新的内容(色块) 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; ...

    jQuery实现右键菜单、遮罩等效果代码

    的方法,对应不同的选项,只改变弹出层里的内容,但是内容都要用jQuery生成拼接,所以选用了比较简单的页面跳转。 下面就只贴上一个示例页面的相关代码。 先上效果图: **index.html主要代码** &lt;div id=myMenu&gt;...

    SignalR 2.0 and MVC 5即时通讯完整版示例

    有一个名为hubs的脚本文件,SignalR库在运行时动态生成。这个文件管理jQuery脚本和服务器端代码之间的通信。如果您使用Internet Explorer以外的浏览器,则还可以通过直接浏览来访问动态集线器文件,例如http:// ...

Global site tag (gtag.js) - Google Analytics