js创建节点,小试牛刀

实现如下的功能

非常简单的一个小训练。

思想:

1.首先创建text和一个button

代码如下、

1 <body>
2 <input type="text" id="text1"/>
3 <input id="btn1" type="button"  value="创建" />
4 <ul>
5     
6 </ul>
7     
8 </body>

2.用js createElement('li');创建li标签放进ul里面

js代码如下

 1 <script>
 2 window.οnlοad=function(){
 3     var oBtn=document.getElementById("btn1");
 4     var text1=document.getElementById("text1");
 5     var oUl =document.getElementsByTagName("ul")[0];
 6     
 7     oBtn.οnclick=function()
 8     {
 9        var oLi=document.createElement('li');    //创建一个没有内容的li标签
10        var isLi=oUl.getElementsByTagName('li');   //获取li数组
11        if (isLi.length>0)   //判断ul里面有没有li标签,如果有,将创建的li放在所有li[0]的前面
12        {
13             oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
14               oUl.insertBefore(oLi, isLi[0]);
15        }
16        else  //否则直接添加到ul上,即是没有li标签在ul上
17        {
18          oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
19          oUl.appendChild(oLi);
20        }
21 
22        //删除功能
23        var oA=oUl.getElementsByTagName("a");
24        if(oA) //如果a标签存在
25        {
26            for(var i=0;i<isLi.length;i++)
27            {
28                 oA[i].οnclick=function()  //点解a标签就删除其父节点,。即是li标签
29                 {
30                     oUl.removeChild(this.parentNode);
31                 }
32            }
33        }
34  
35     }
36 };
37 </script>

其实代码非常简单,自己写写,练习一下熟练度。

转载于:https://www.cnblogs.com/biyongyao/p/5851315.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 8是指什么_java中8个基本数据类型到底是指什么?是什么意思,有什么作用?我需要权威的回答,...

在java中一共有八种基本数据类型&#xff0c;他们分别是byte、short、int、long、float、double、char、boolean整型其中byte、short、int、long都是表示整数的&#xff0c;只不过他们的取值范围不一样byte的取值范围为-128~127&#xff0c;占用1个字节(-2的7次方到2的7次方-1)…

企业讯息

本文是我们名为“ Spring Integration for EAI ”的学院课程的一部分。 在本课程中&#xff0c;向您介绍了企业应用程序集成模式以及Spring Integration如何解决它们。 接下来&#xff0c;您将深入研究Spring Integration的基础知识&#xff0c;例如通道&#xff0c;转换器和适…

php生成txt文件_php 批量生成html,txt文件的实现代码

本篇文章是对使用php批量生成html,txt文件的实现代码进行了详细的分析介绍&#xff0c;需要的朋友参考下首先建立一个conn.php的文件用来链接数据库$link mysql_connect("mysql_host" , "mysql_user" , "mysql_password" )or die("Could n…

HDU 3665 Seaside

题目链接&#xff1a; http://acm.split.hdu.edu.cn/showproblem.php?pid3665 Problem DescriptionXiaoY is living in a big city, there are N towns in it and some towns near the sea. All these towns are numbered from 0 to N-1 and XiaoY lives in the town numbered…

Spring MVC 学习笔记一 HelloWorld

Spring MVC 学习笔记一 HelloWorld Spring MVC 的使用可以按照以下步骤进行&#xff08;使用Eclipse&#xff09;&#xff1a; 加入JAR包在web.xml中配置DispatcherServlet加入Spring MVC的配置文件编写处理请求的处理器&#xff0c;并添加对应注解编写视图下面按照国际惯例先来…

php 避免xss_PHP防止XSS注入

我们在做网站的时候&#xff0c;经常有input提交&#xff0c;通常前端对input中的内容不做判断&#xff0c;只做不为空等简单的操作。但是&#xff0c;有的input中会提交一些javascript或者html,会给网站造成一定的危害。为此&#xff0c;防止XSS注入的任务交给了后端&#xff…

为什么选择Docker?

容器并不是什么新鲜事物&#xff0c;但是实现它们总是比需要的要复杂一些。 Docker在简化容器方面取得了长足的进步&#xff0c;并从此引爆了整个世界。 让我们看看为什么。 为什么Docker成为家喻户晓的名字 Docker不是很老。 2014年5月&#xff0c;当我写了一篇煽动性博客文章…

全字符微信名 php,PHP方法处理微信昵称特殊符号过滤

我们在通过PHP获取微信昵称&#xff0c;并且存于数据库的时候&#xff0c;由于一些昵称带有特殊符号&#xff0c;所以存不进去&#xff0c;这时候我们可以通过下面的方式来处理。方法二protected function removeEmoji($clean_text) {// Match Emoticons$regexEmoticons /[\x{…

[转载]我的PMP复习备考经验谈(下篇)——一本关于PMP备考的小指南

原文地址&#xff1a;我的PMP复习备考经验谈(下篇)——一本关于PMP备考的小指南作者&#xff1a;羽少宸PMP复习备考经验谈&#xff08;下篇&#xff09;——PMP备考小指南 总结经验&#xff0c;展望未来&#xff0c;以此纪念PMP复习备考时光 继上篇&#xff0c;猛击直达四、如何…

java如何抽象一辆车,java新职篇:面向对象之抽象

面向对象编程的一个实质性的要素是抽象。人们通过抽象(abstraction)处理复杂性。例如&#xff0c;人们不会把一辆汽车想象成由几万个互相独立的部分所组成的一套装置&#xff0c;而是把汽车想成一个具有自己独特行为的对象。这种抽象使人们可以很容易地将一辆汽车开到杂货店&am…

Test on 09/04/2016

滑稽树 (huajitree.pas/c/cpp) 【问题描述】 JZYZ的湖畔边有一棵滑稽树&#xff0c;每年的冬天滑稽树上都会长出很多个滑稽果。我们用一个二维平面N,M描述每个滑稽果所能落下的位置&#xff0c;即每个滑稽果不可能落到我们所描述的二维平面之外。 滑稽大师cdc钟爱于收集滑稽…

php项目私有化部署保护代码,ThinkPHP项目安全配置解决方案

前言:ThinkPHP MVC框架越来被开发者接受,众多的开发者选择了这个框架&#xff0c;也有很多的优秀项目使用的ThinkPHP框架。最近整理了一下ThinkPHP项目的一些安全配置。可能并不适用全部项目&#xff0c;大家可以适当的使用如下的安全配置。前置知识:web容器和各类组件的版本&a…

Apache-SimpleEmail 简单应用

比JavaMail使用方法要直接&#xff0c;jar包只需要在JavaMail的基础上添加commons-email-1.4.jar即可。 代码&#xff1a; // QQ邮箱发送邮件 SimpleEmail simpleEmail new SimpleEmail(); simpleEmail.setHostName("smtp.qq.com"); simpleEmail.setAuthentication(…

php7.0 百度百科,PHP 7.0.10正式发布

原标题&#xff1a;PHP 7.0.10正式发布PHP 7.0.10 正式发布了。下载地址&#xff1a;http://php.net/distributions/php-7.0.10.tar.gz改进日志如下&#xff1a;- Core:. Fixed bug #72629 (Caught exception assignment to variables ignores references). (Laruence). Fixed …

javascript中构造函数的说明

1.1 构造函数是一个模板 构造函数&#xff0c;是一种函数&#xff0c;主要用来在创建对象时对 对象 进行初始化&#xff08;即为对象成员变量赋初始值&#xff09;&#xff0c;并且总是与new运算符一起使用。 1.2 new 运算符 new运算符创建一个新对象。关键字new后跟随一个函数…

大数据分析 es hive_使用Hive和iReport进行大数据分析

大数据分析 es hive每个JJ Abrams的电视连续剧疑犯追踪从主要人物芬奇先生一个下列叙述情节开始&#xff1a;“ 你是被监视。 政府拥有一个秘密系统-每天每天每小时都会对您进行监视的机器。 我知道是因为...我建造了它。 “当然&#xff0c;我们的技术人员知道得更多。 庞大的…

datetime unix php,PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】...

本文实例讲述了PHP基于DateTime类解决Unix时间戳与日期互转问题。分享给大家供大家参考&#xff0c;具体如下&#xff1a;这个问题主要在32位的系统下出现&#xff0c;64位的不存在这样的问题。php 5.2提供了DateTime类来处理这样的问题&#xff0c;参考方案如下(请注意时区的处…

Java中的使用了未经检查或不安全的操作

1。 javac -Xlint:unchecked MyMath.java检查不安全的操作 /***************************************************/ MyMath.java:29: 警告: [unchecked] 对作为原始类型ArrayList的成员的add(E)的调用未经过检查 array.add("1"); ^ 其中, E是类型变量: E扩展已在类 …

java+jsp+网页制作,java+jsp+mysql网页制作总结(2)

错误&#xff1a;url通过get传递时汉字出错解决&#xff1a;url通过get传递时汉字会乱码&#xff0c;1.String name1request.getParameter("name");String name new String(name1.getBytes("ISO-8859-1"),"gbk");2.通过post传递参数错误&#x…

Analyzing Storage Performance using the Windows Performance Analysis ToolKit (WPT)

https://blogs.technet.microsoft.com/robertsmith/2012/02/07/analyzing-storage-performance-using-the-windows-performance-analysis-toolkit-wpt/转载于:https://www.cnblogs.com/zengkefu/p/5864455.html