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,一经查实,立即删除!

相关文章

企业讯息

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

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…

全字符微信名 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;猛击直达四、如何…

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

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

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

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

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…

Redis聚类

本文是我们学院课程的一部分&#xff0c;标题为Redis NoSQL键值存储 。 这是Redis的速成班。 您将学习如何安装Redis并启动服务器。 此外&#xff0c;您将在Redis命令行中乱七八糟。 接下来是更高级的主题&#xff0c;例如复制&#xff0c;分片和集群&#xff0c;同时还介绍了…

域策略禁用usb

文档及模板可在 http://pan.baidu.com/s/1qYTcjTy 下载 pro_usb_users.adm 此模板可禁用到 指定盘符&#xff0c;针对用户策略 pro_usb_computers.adm 此模板 针对计算机&#xff0c;一般只要它就好了。 可以从 3 个方面下手 adm 配置 文件。注册表usb驱动其实 adm配置文件&…

Redis分片

本文是我们学院课程的一部分&#xff0c;标题为Redis NoSQL键值存储 。 这是Redis的速成班。 您将学习如何安装Redis并启动服务器。 此外&#xff0c;您将在Redis命令行中乱七八糟。 接下来是更高级的主题&#xff0c;例如复制&#xff0c;分片和集群&#xff0c;同时还介绍了…

Openstack入坑指南

什么是云计算 概念 云计算是一种基于互联网的计算方式&#xff0c;通过这种方式&#xff0c;共享的软硬件资源和信息&#xff0c;可以按需求提供给计算机和其他设备。用户不需要了解”云“中的基础设施细节&#xff0c;不必具有相应的专业知识&#xff0c;也无需直接控制。云计…

MATLAB如何用循环分割,利用Matlab进行分割提取浮游生物

我试图从扫描图像中提取浮游生物.大纲也不错,但是,现在我不知道如何提取图像,因此可以单独保存每个浮游生物.我尝试使用标签,但是有很多噪音,它标出了每一个规格.我想知道是否有更好的方法来做到这一点.这是我的代码&#xff1a;I imread(plankton_2.jpg);figure, imshow(I), …

第一个Python程序

在E:\Python 下新建一个hello.py文件&#xff0c;里面的内容是print(hello world) 进入命令提示窗格&#xff0c;输入E: 点击回车 输入 cd python 点击回车 输入Python hello.py 结果如图 转载于:https://www.cnblogs.com/lgqboke/p/5882049.html

20145219 《信息安全系统设计基础》第01周学习总结

20145219 《信息安全系统设计基础》第01周学习总结 教材学习内容总结 别出心裁的Linux命令学习法 1、Ubuntu快捷键 CTRLALTT:打开终端&#xff1b;CTRLSHIFTT&#xff1a;新建标签页&#xff1b;ALT数字N&#xff1a;终端中切换到第N个标签页&#xff1b;Tab:终端中命令补全&…

拉盖尔多项式 matlab,类氢原子的定态波函数

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp预备知识 球坐标系中的定态薛定谔方程&#xff0c;原子单位制本文使用原子单位制&#xff0e;类氢原子(hydrogen-like atom)被定义为原子核有 $Z$ 个质子(核电荷为 $Ze$)有一个核外电子的原子/离子&#xff0…

再论EM算法的收敛性和K-Means的收敛性

标签&#xff08;空格分隔&#xff09;&#xff1a; 机器学习 &#xff08;最近被一波波的笔试面试淹没了&#xff0c;但是在有两次面试时被问到了同一个问题&#xff1a;K-Means算法的收敛性。在网上查阅了很多资料&#xff0c;并没有看到很清晰的解释&#xff0c;所以希望可以…

杰尔·地狱

什么是JAR地狱&#xff1f; &#xff08;或者是classpath地狱&#xff1f;还是依赖地狱&#xff1f;&#xff09;在考虑使用Maven或OSGi等现代开发工具时&#xff0c;哪些方面仍然有意义&#xff1f; 有趣的是&#xff0c;似乎没有对这些问题的结构化答案&#xff08;即&#…

matlab实验符号计算答案,实验五matlab符号计算

实验五matlab符号计算 实验 5 符号计算 教师评分班级 学号 姓名实验日期 2014 年 6 月 17 日 星期 二 第 1 至 2 节课实验地点实验目的1. 掌握定义符号对象的办法2. 掌握符号表达式的运算法则以及符号矩阵运算3. 掌握求符号函数极限及导数的方法4. 掌握求符号函数定积分和不定积…

Java学习笔记之:Java String类

一、引言 字符串广泛应用在Java编程中&#xff0c;在Java中字符串属于对象&#xff0c;Java提供了String类来创建和操作字符串。 创建字符串最简单的方式如下: String str "Hello world!"; String类型是特殊的引用类型&#xff0c;我们也可以通过实例化的方式来创建 …