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

举报
yd_273762914 发表于 2020/12/03 00:57:56 2020/12/03
【摘要】  <!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"> </he...



<!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>

 

文章来源: smilenicky.blog.csdn.net,作者:smileNicky,版权归原作者所有,如需转载,请联系作者。

原文链接:smilenicky.blog.csdn.net/article/details/48979075

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。