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 ...
随机推荐
- 电脑无法登陆ftp
电脑无法登陆ftp,或者对于少数ftp能登陆,大多数不能登陆,用了一大堆ftp软件一样登陆不了.后来baidu了一下,发现是防火墙的问题.据说是Windows防火墙阻止了20/21端口的通信,说白了就 ...
- sphinx 增量索引 实现近实时更新
一.sphinx增量索引的设置 数据库中的已有数据很大,又不断有新数据加入到数据库中,也希望能够检索到.全部重新建立索引很消耗资源,因为我们需要更新的数据相比较而言很少.例如.原来的数据有几百万条 ...
- codeforces 666A (DP)
题目链接:http://codeforces.com/problemset/problem/666/A 思路:dp[i][0]表示第a[i-1]~a[i]组成的字符串是否可行,dp[i][1]表示第a ...
- [转]设置Android手机以使用ARM Streamline进行性能分析(二)
原文因为arm社区改版访问不到了,原作者鲍方,原文地址,这篇是从google cache里挖出来的,希望能帮到要对cocos2dx优化的各位 Posted by Fang Bao, Leave C ...
- Largest Number
Given a list of non negative integers, arrange them such that they form the largest number. For exam ...
- border-image(转载)
本文转自:http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image%E8%AF%A6%E8%A7%A3%E3%80%81%E5%BA% ...
- Linux TC基于CBQ队列的流量管理范例
参考了TC的很多文档,自己也整理了一篇配置记录.在实际使用过程中效果还不错,在此分享给大家以备参考.环境:局域网规模不是很大40多台机器. NAT共享上网(内网:eth0 外网:eth2)CBQ是通过 ...
- 第一次装TFS的曲折经历
公司服务器之前TFS没装上,用的svn,实在忍受不了了,作为一个.net程序员怎么能用svn的,说动手就动手. 服务器的数据库是 SqlServer2008R2 本来想装TFS2013,后来试了一下, ...
- sql 查询效率
1. SQL优化的原则是:将一次操作需要读取的BLOCK数减到最低,即在最短的时间达到最大的数据吞吐量.调整不良SQL通常可以从以下几点切入: 检查不良的SQL,考虑其写法是否还有可优化内容 检查子查 ...
- 【转载】非线性分析中的ansys跟踪显示
原文地址:http://muchong.com/html/201209/4936556.html 在ansys output windows 有 force convergenge valu 值 和 ...