javascript动态的创建无序列表条目

最新推荐文章于 2023-06-08 19:20:59 发布
最新推荐文章于 2023-06-08 19:20:59 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fzxyxf1314/article/details/120436049
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript动态的创建无序列表条目</title>
</head>

<body>
    <ul id="news">
        <li>动态添加列表条目示例</li>
        <li>动态添加列表条目示例</li>
    </ul>
    <input type="button" id="btnAdd" value="+" />
    <input type="button" id="btnDel" value="-"/>
    <script type="text/javascript">
        var oNew = document.getElementById("news");
        document.getElementById("btnAdd").onclick = function(){
            oElentment = document.createElement("li");
            oTextNode = document.createTextNode("动态添加列表条目示例");
            oElentment.appendChild(oTextNode);
            oNew.appendChild(oElentment);
        }
        document.getElementById("btnDel").onclick = function(){
            if(oNew.hasChildNodes()){
                oNew.removeChild(oNew.lastChild);
            }
        }
    </script>
</body>
</html>

本地实际应用

<tr>
                        <th>配音类型</th>

                        <td id="vtable" class="form-inline" style="position: relative;" >

                            <if condition="$post.hebing">

                                <foreach  name="$post.hebing" id="vo" key="k" >
                                    <if condition="$k == ''">
                                        <ul id="news">
                                            <li><input class="form-control" type="text" style="width:140px;float:left;" value="{$vo}" name="parts2[]"  placeholder="名称"/><input class="form-control" type="text" style="width:140px;float:left;" value="{$k}" name="parts[]"  placeholder="ID"/></li><br/><br/>
                                        </ul>
                                        <else />
                                        <ul id="news">
                                            <li><input class="form-control" type="text" style="width:140px;float:left;" value="{$k}" name="parts2[]"  placeholder="名称"/><input class="form-control" type="text" style="width:140px;float:left;" value="{$vo}" name="parts[]"  placeholder="视频ID"/></li><br/><br/>
                                        </ul>
                                    </if>
                                </foreach>
                                <input type="button" id="btnAdd" value="+" />
                                <input type="button" id="btnDel" value="-"/>
                            <else />
                                <ul id="news">
                                    <li><input class="form-control" type="text" style="width:140px;float:left;" value="" name="parts2[]"  placeholder="名称"/><input class="form-control" type="text" style="width:140px;float:left;" value="" name="parts[]"  placeholder="视频ID"/></li><br/><br/>
                                </ul>
                                <input type="button" id="btnAdd" value="+" />
                                <input type="button" id="btnDel" value="-"/>
                            </if>

                        </td>
                    </tr>

<script type="text/javascript">
    //变量添加条例
    var oNew = document.getElementById("news");
    document.getElementById("btnAdd").onclick = function(){
        oElentment = document.createElement("li");
        oElentment.innerHTML = "<input class=\"form-control\" type=\"text\" style=\"width:140px;float:left;\" value=\"\" name=\"parts2[]\"  placeholder=\"名称\"/><input class=\"form-control\" type=\"text\" style=\"width:140px;float:left;\" value=\"\" name=\"parts[]\"  placeholder=\"ID\"/><br/><br/>";
        oNew.appendChild(oElentment);
    }
    document.getElementById("btnDel").onclick = function(){
        if(oNew.hasChildNodes()){
            oNew.removeChild(oNew.lastChild);
        }
    }
</script>

xingxingwuxin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
js无序列表
02-15
使用js实现无序列表，适合每一位初学者的小例子。
js动态条目添加
08-24
css 的架构信息 和 javascript 动态处理
Javascript动态创建div的方法
10-24
主要介绍了Javascript动态创建div的方法,是javascript节点操作的典型应用,非常具有实用价值,需要的朋友可以参考下
JS-Object无序问题
最新发布
我是我
06-08 1098
object无序，在百度小程序无法正确排序
js对象无序排序解决
qq_48726086的博客
02-24 1428
var arr=[]; for(var key in res){ arr.push(key) } arr = arr.sort() var newData={} for(var i in arr){ var...
Js纯数字数组，无序则升降排序，有序则乱序
入坑笔记
11-06 1531
纯数字无序数组的升降排序 var arr = [1,6,2,18,9,21,5,32,16] // 定义一个无序数组 arr.sort() // 直接调用arr.sort()则按ASCII字符排序 [1, 16, 18, 2, 21, 32, 5, 6, 9] //此结果不是我们想要的 arr.sort(function (a, b) { return a - b }) //按数...
js案例：根据数据，动态生成无序列表，区分奇偶行，并添加样式，添加数组内的内容
成长的嘻嘻哥
01-31 419
js：根据数据，动态生成无序列表，区分奇偶行，并添加样式，添加数组内的内容
JS：js中获取一个无序列表并按照有序的方式显示
QD的博客
03-03 5625
获取一个无序列表var ul = document.getElementById('source'); var li = ul.getElementsByTagName('li'); function getData() { var str; var data=[]; var i = 0; while(li[i]!=undefined) { str = li[i].inner
draft.js_如何使用快捷方式在Draft.js中创建有序列表和无序列表
cumi7754的博客
07-29 575
draft.jsby Andrey Semin 通过安德烈·塞米(Andrey Semin) 如何使用快捷方式在Draft.js中创建有序列表和无序列表 (How to create ordered and unordered lists in Draft.js with a shortcut) We at Propeller have encountered many differences...
CSS样式、选择器、javaScript、有/无序列表
FUKEXIN_xiaojiang的博客
10-11 520
1、引入CSS代码的三种方式 行内样式表：<h1 style="color:red;">标题</h1> 内部样式表：<h2 id="a">标题</h2> 在head内<style type="text/css"> ...
javascript 动态创建表格
10-24
主要介绍了javascript 动态创建表格,需要的朋友可以参考下
javascript实现dom动态创建省市纵向列表菜单的方法
10-24
主要介绍了javascript实现dom动态创建省市纵向列表菜单的方法,可实现省市列表菜单效果,涉及javascript鼠标事件及页面处理json数据的技巧,需要的朋友可以参考下
javascript 动态创建 Option选项
10-29
javascript动态创建Option选项，选择月份后动态创建日期。
javascript动态创建链接的方法
10-24
主要介绍了javascript动态创建链接的方法,涉及javascript动态操作页面元素的技巧,需要的朋友可以参考下
js里面的有序排列、无序排列
林中明月间丶
03-23 3940
&lt;script type="text/javascript"&gt; var arr = ['a','b','c','d'];//sort 默认为字符串的转换 '200' '30' 3&gt;2 arr.sort(); alert(arr);//a,b,c,d var arr2 =[5,2,3,78,9,5,6] arr2.sort(function(a,b){ return a-b;...
用JavaScript写一个滚动无序列表
weixin_75141231的博客
06-03 187
吹不出褶的平静日子，也在闪光 前路浩浩荡荡，万事尽可期待 做世界的水手，奔赴所有港口 去更远的地方，见更亮的光 来日方长，何惧车遥马慢 我们的征途是星辰大海 生活明朗，万物可爱 保持热爱，奔赴山海 但行好事，莫问前程
无序列表简介
king220022的博客
04-12 2364
无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。注意，ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。在该语法中，使用标签表示一个无序列表的开始和结束，表示这是一个列表项。跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。上面代码是错误的，因为ul元素的子元素只能是li元素，不能是其他元素。
前端基础概括
qq_51324662的博客
04-23 5108
前端补充 <h1></h1> h1~h6标题表现 <b></b> 加粗 <i></i> 斜体 <u></u> 下划线 <s></s> 删除线 <p></p> 段落标签 <br> 换行 <hr> 水平分割线 标签的分类2 #1 块儿级标签 ：独占一行 &l
【前端】Html+Css+JavaScript基础知识点
lcukyNwa的博客
07-18 4666
Html+Css+JavaScript基础知识点
javascript动态创建VML
05-14
如果您需要使用JavaScript动态创建VML元素，可以使用以下代码： ```javascript // 创建VML元素 var vmlElement = document.createElement('v:rect'); // 设置VML元素的属性 vmlElement.style.width = '100px'; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingxingwuxin

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值