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. mysql视图和存储过程定义者修改脚本（懒人专用）

    前言: 在实际工作中mysql数据库的迁移.备份恢复.数据库重命名等一系列涉及到视图和存储过程定义者问题都会需要修改,每次都要从基础表获取数据,然后手工整理做脚本,十分麻烦,所以简单写了个过程,以后可 ...

  2. MinGW安装和使用总结

    0.前言 最近对开源编译平台和编译器产生了兴趣,借博客平台总结一些东西(包括minGW,eclipse,sourcery和GDB调试等内容).总感觉时间一长某些东西自己都会忘记,过段时间回头看看自己的 ...

  3. utf8乱码解决方案[适合tomcat部署的jsp应用]

    转:http://blog.csdn.net/cn_gaowei/article/details/6673539 1.       java类: CharacterEncodingFilter  im ...

  4. cc2530 timer 3 PWM <可调占空比>

    前提: 开始用的是 cc2530 timer 1来做PWM的,已经可调占空比了,但是由于硬件的改动,需要用timer 3 和 timer 4 代替.由于调试过程中出了些小问题,于是自己把这个贴出来.关 ...

  5. 【转】来自《轻松scrum之旅》的敏捷开发总结

    敏捷开发的核心价值观是,软件开发最重要的是给用户提供有价值的.可以工作的软件.如何保证提供有价值的软件,是通过反馈机制来完成的.这一点,我们体会很深.自从采用敏捷开发以后,我们比以前更有意识地希望得到 ...

  6. delphi 连接mysql

    Delphi连接MySQL真麻烦,研究了一天,从网上找了无数文章,下载了无数插件都没解决.最后返璞归真,老老实实用ADO来连接,发现也不是很顺利,但最终还是连接成功了.多少有点心得:ADO各个组件的作 ...

  7. 使MySQL 支持繁体字

    要 MySQL 支持繁体字,可以将相关编码设置为 UTF8 (也叫 UTF-8).编码的设置从浏览器到表字段,一个都不能少: 浏览器设置 HTML设置 服务器 Request 对象设置 数据库连接设置 ...

  8. 图解iPhone开发新手教程

    如今的智能手机越来越风行了,当中尤以Apple的iPhone和Google的Android系统最为流行,这里我将向大家介绍iPhone开发的基础知识.为了便于刚開始学习的人尽快上手,我尽量以代码加截图 ...

  9. [ZZ]如果有人问你数据库的原理，叫他看这篇文章

    如果有人问你数据库的原理,叫他看这篇文章 http://blog.jobbole.com/100349/ 文章把知识链都给串起来,对数据库做一个概述. 合并排序 阵列.树和哈希表 B+树索引概述 数据 ...

  10. 如何在mac上創建txt文档

    文件編輯(Mac下的記事本),shift + command + T 進入純文字編輯模式!