js创建节点,小试牛刀
实现如下的功能
非常简单的一个小训练。
思想:
1.首先创建text和一个button
代码如下、
<body>
<input type="text" id="text1"/>
<input id="btn1" type="button" value="创建" />
<ul> </ul> </body>
2.用js createElement('li');创建li标签放进ul里面
js代码如下
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
var text1=document.getElementById("text1");
var oUl =document.getElementsByTagName("ul")[0]; oBtn.onclick=function()
{
var oLi=document.createElement('li'); //创建一个没有内容的li标签
var isLi=oUl.getElementsByTagName('li'); //获取li数组
if (isLi.length>0) //判断ul里面有没有li标签,如果有,将创建的li放在所有li[0]的前面
{
oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
oUl.insertBefore(oLi, isLi[0]);
}
else //否则直接添加到ul上,即是没有li标签在ul上
{
oLi.innerHTML=text1.value+' '+"<a href='javascript:'>删除</a>";
oUl.appendChild(oLi);
} //删除功能
var oA=oUl.getElementsByTagName("a");
if(oA) //如果a标签存在
{
for(var i=0;i<isLi.length;i++)
{
oA[i].onclick=function() //点解a标签就删除其父节点,。即是li标签
{
oUl.removeChild(this.parentNode);
}
}
} }
};
</script>
其实代码非常简单,自己写写,练习一下熟练度。
js创建节点,小试牛刀的更多相关文章
- js创建节点及其属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 创建节点 以及 节点属性 删除节点
case 'copy': var B1 = document.getElementById("B1"); //获得B1下的html文本 var copy_dom = documen ...
- js 创建节点
//获取对象 console.log(obj)//字符串转对象 var ob = JSON.parse(data); //对象转为字符串 console.log(JSON.stringify(obj) ...
- js创建子节点
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- JS DOM创建节点
DOM节点操作之增删改查 document.write() 可以向文档中添加节点 但是有个致命问题,会把文档原有的节点全部清空 因此不推荐使用 <!DOCTYPE html> <ht ...
- 第十三课:js操作节点的创建
浏览器提供了多种方法创建节点.比如:document.createElement,innerHTML,insertAdjacentHTML,createContextualFragment. docu ...
- js添加创建节点和合并节点
var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...
- JQuery_DOM 节点操作之创建节点、插入节点
一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...
- js创建元素
js创建多条数据,插入到页面中的方法. 方法一: 执行时间大概在35ms左右. 这个就属于使用字符串拼接之后,再一次性的插入到页面中.缺点是,容易导致事件难以绑定. 方法二: 执行时间不定,最少的在8 ...
随机推荐
- Jmeter—3 http请求—content-type与参数
本文讲三种content-type以及在Jmeter中对应的参数输入方式 第一部分:目前工作中涉及到的content-type 有三种: content-type:在Request Headers里, ...
- GIT 如何删除某个本地的提交
一.rm后要commit一下才会生效,但这样只是让文件不再出现在今后的版本中,文件副本仍然会在.git/下(这样git才能让误删的文件恢复). 要彻底消灭文件副本,那就要让文件彻底从历史中消失,分两种 ...
- JSP EL表达式 与输入有关的内置对象
与输入有关的隐含对象有两个param和paramValues,用来取得用户的请求参数.在使用EL之前可以使用如下代码取得用户的请求参数: request.getParameter(String nam ...
- TextView 跑马灯
首先,写一个类,让其继承自TextView: 重写focus方法,让TextView始终是focus. public class MarqueeText extends TextView { publ ...
- SPARQL1.1 101 Language and Jena support
1 introduction definition cited from SPARQL 1.1 Overview: SPARQL 1.1 is a set of specifications that ...
- 使用JavaScript设置、获取父子页面中的值
一:获取父页面中的值 有二种方法windows.open()和windows.showModalDialog() 1.windos.open(URL,name,reatures,replace) 再父 ...
- python 函数可变长参数
python中的可变长参数有两种: 一种是非关键字参数(*元组),另一种是关键字参数(**字典) 非关键字可变长参数: """ 非关键字可变参数,一个星号作为元组传入函数 ...
- kuangbin_SegTree E (HDU 1698)
POJ服务器炸了 还没好呢 然后就只能跳掉一些题目了 这题也是成段更新模板题 本来lazy标记不是很明白 后来学长上课讲了一下就知道原理了 回去看看代码很容易就理解了 #include <cst ...
- 億万笑者 - Radwimps
億万笑者 作曲:野田洋次郎 作词:野田洋次郎 明日に希望を持った者だけに 絶望があるんだ何かを信じた者だけに 裏切りはあるんだ勇者だけに与えられた 名誉の負傷とでも言うのかそれにしてはずいぶんと 割に ...
- 关于tomcat7下websocket不能使用
tomcat启动时提示 信息: JSR 356 WebSocket (Java WebSocket 1.0) support is not available when running on Java ...