JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

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

JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里的更多相关文章

  1. Html ： 点击按钮弹出输入框，再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  3. ExtJs 4.2.1 点击按钮弹出表单的窗口

    初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这 ...

  4. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  6. ASP.NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  7. Asp.net点击按钮弹出文件夹选择框的实现（网页）

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

  8. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  9. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

随机推荐

  1. poj 2251 搜索

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13923   Accepted: 5424 D ...

  2. Dev XtraTreeList 学习

    本文转载:http://www.cnblogs.com/VincentLuo/archive/2012/01/06/2313983.html 一.设置载请保留地址http://www.cnblogs. ...

  3. 【M19】了解临时对象的来源

    1.首先,确认什么是临时对象.在swap方法中,建立一个对象temp,程序员往往把temp称为临时对象.实际上,temp是个局部对象.C++中所谓的临时对象是不可见的,产生一个non-heap对象,并 ...

  4. Mac Pro更换SSD后，在Win7下启用ACHI的方法AHCI

    在Mac Pro下更换SSD后,如果安装Win7,要将SSD改为AHCI模式是非常麻烦的.本文介绍如何将Mac的Win7下的SSD改为AHCI方式驱动,及几种常见问题的处理. 一.当Lion与Win7 ...

  5. TQ210裸机编程(2)——LED流水灯

    两个文件start.S和led.c start.S .global _start                @声明一个全局的标号 _start:     bl main               ...

  6. Python 魔术方法指南

    入门 构造和初始化 构造定制类 用于比较的魔术方法 用于数值处理的魔术方法 表现你的类 控制属性访问 创建定制序列 反射 可以调用的对象 会话管理器 创建描述器对象 持久化对象 总结 附录 介绍 此教 ...

  7. 了解undefined、null、NaN的区别

    1.常规的解释,null是个对象,表示空值,undefined也是个对象,表示没有定义 2.详细分析 null 书上的解释(Javascript权威指南),Javascript的关键词null是一种特 ...

  8. 【转】使用BBB的device tree和cape（重新整理版）

    只要你想用BBB做哪怕一丁点涉及到硬件的东西,你就不可避免地要用到cape和device tree的知识.所以尽管它们看起来很陌生而且有点复杂,但还是得学.其实用起来不难的.下面我只讲使用时必须会的内 ...

  9. Test complete测试工具介绍

    Test complete 是一款性价比比较高的测试工具,能够满足大多数用户的自动化测试的需求. Test complete 是近几年流行和发展起来的一款自动化测试工具,早期版本由Automated ...

  10. [转]javascript指定事件处理程序包括三种方式：

    javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...