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 ...
随机推荐
- VC只运行一个程序实例
方法有很多,以下只是提供一种用的多的 一. 单文档程序 在程序App类的InitInstance中添加如下代码 BOOL CDDZApp::InitInstance() { /*只运行一个实例*/ / ...
- C++ 之 const 随笔记
const关键字,相信对C语言有所了解的同学都应该知道他的作用:1.修饰常量,2.修饰指针,3.修饰函数 1.修饰常量 const修饰后的变量被定义为常量 2.修饰指针 当用const修饰指针的时候, ...
- HBase的快照技术
(1) 什么是快照 快照就是一份元信息的合集,允许管理员恢复到表的先前状态,快照不是表的复制而是一个文件名称列表,因而不会复制数据. 完全快照恢复是指恢复到之前的表结构以及当时的数据快照之后发 ...
- 安装生物信息学软件-R
主要参考http://www.3fwork.com/b211/000091MYM021616/ Step 1 : sudo gedit /etc/apt/sources.list 添加到末尾 deb ...
- 【Selenium2+Python】定位
定位Frame driver.switch_to_frame("frameID") 多窗口切换 #获得当前窗口 nowhandle = driver.current_window_ ...
- H5版俄罗斯方块(3)---游戏的AI算法
前言: 算是"long long ago"的事了, 某著名互联网公司在我校举行了一次"lengend code"的比赛, 其中有一题就是"智能俄罗斯方 ...
- Javascript 中的 && 和 || 使用小结
准备两个对象用于下面的讨论. var alice = { name: "alice", toString: function () { return this.name; } }; ...
- Altium Designer 画"差分线"
Altium Designer 画"差分线" 如何在 Altium Designer 中快速进行差分对走线1:在原理图中让一对网络前缀相同,后缀分别为_N 和_P,并且加上差分队对 ...
- CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
- 033. asp.netWeb用户控件之二将页面转换成web控件和使用Web控件显示热点新闻
访问Web用户控件的属性 ASP.NET提供的各种服务器控件都有其自身的属性和方法,程序开发人员可以灵活地使用服务器控件中的属性和方法开发程序.在用户控件中,程序开发人员也可以自行定义各种属性和方法, ...