JavaScript系列之实现ul动态添加li元素

分手后的思念是犯贱 2021-09-10 15:16 627阅读 0赞

<!doctype html>  
<html manifest="lab4.manifest">  
<head>  
<title>Mobile Cookbook</title>  
<meta charset="utf-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>  
<body >  
   
  <section>  
     
    <form id="form1" name="form1" method="post">  
      <input type="button" name="button"  onClick="inputBox();"id="button" value="Add Note" />  
      <ul id="ul">  
     <li>metting</li>  
        <li>读书</li>  
        <li>打代码</li>  
        <li>看代码</li>  
        <li>看博客</li>  
      </ul>  
    </form>  
    <div></div>  
    
 <script language="javascript">  
   
 function inputBox()  
 \{  
   
  var str=prompt("您的备忘录^-^","");  
    
  if(str!=null&&str!="")  
  \{  
   var ul = document.getElementById("ul");  
      var num = ul.childNodes.length;    
   add(1,str);  
   alert("^-^添加成功,您刚输入的是："+ str)  
  \}

\}  
   
 function add(n,str)\{  
   
  var ul = document.getElementById('ul');  
  var li = document.createElement("li");  
  var num = ul.childNodes.length;  
   
  li.innerHTML=str;  
   
  for(var i=0;i<num;i++)\{  
   if(n==-1)\{  
    ul.appendChild(li);   
   \}else if(i==n-1)\{  
    ul.insertBefore(li,ul.childNodes\[i\]);  
   \}  
  \}  
   
 \}  
   
</script>  
  </section>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，627人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中ul,li{}； ul li{}； ul＞li{}有何区别

![a09384c31d2f3403435ddb8d7e617445.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 16:32/ 0 赞/ 123 阅读

相关动态生成ul的li并添加addEventListener

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>li</tit

墨蓝/ 2023年06月27日 08:39/ 0 赞/ 39 阅读

相关利用伪元素before给无序列表ul中的li添加有序序号

在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。原来未接触CSS3的时候，

向右看齐/ 2022年11月28日 10:39/ 0 赞/ 209 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 277 阅读

相关遍历 ul li

<pre name="code" class="javascript">//遍历当前用户 function foreachAuthor(data

快来打我*/ 2022年09月21日 13:24/ 0 赞/ 164 阅读

相关动态添加删除li

这个功能的需求是这样的，接收人处显示多个用户名（是结果），在输入框输入完成后，回车键或者失去焦点，就去查询，查询结果出来后，通过点击加号再添到接收人处。

痛定思痛。/ 2022年08月18日 13:15/ 0 赞/ 247 阅读

相关 html中ul li前面小黑点样式 ul li一些样式

对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。 1、在CSS中写

爱被打了一巴掌/ 2022年07月19日 05:11/ 0 赞/ 350 阅读

相关 JavaScript获取ul中li个数的方法

有这样一段HTML代码： <ul id="myViewMore "> <li>1</li> <li>2</li> <l

本是古典何须时尚/ 2022年04月17日 06:55/ 0 赞/ 248 阅读

相关 JavaScript--动态添加元素

在网页中，使用JavaScript动态创建元素的方式有三种： 1.document.write() 2.Element.innerHTML 3.document.crea

旧城等待，/ 2022年03月28日 04:38/ 0 赞/ 343 阅读

相关 JavaScript系列之实现ul动态添加li元素

<!doctype html> <html manifest="lab4.manifest"> <head> <title>Mobile Cookbook<

分手后的思念是犯贱/ 2021年09月10日 15:16/ 0 赞/ 628 阅读