web.随笔之创建新元素与复制元素
来源:互联网 发布:linux应用程序设计教程 编辑:程序博客网 时间:2024/06/09 16:11
1. 创建新元素
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; oUl.insertBefore(oLi, aLi[0]);//添加元素至aLi[0]前 //oUl.appendChild(oLi);//此行作用添加元素至最后 };};</script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>
- 复制元素 cloneNode
<!DOCTYPE html><html> <meta charset="utf-8"><body><ul id="myList1"><li>Coffee</li><li>Tea</li></ul><ul id="myList2"><li>Water</li><li>Milk</li></ul><p id="demo">请点击按钮把项目从一个列表复制到另一个列表中。</p><button onclick="myFunction()">试一下</button><script>function myFunction(){var oul=document.getElementById("myList1")var lis=oul.getElementsByTagName('li');var itm=document.getElementById("myList2").lastChild;var cln=itm.cloneNode(true);//alert(lis[0].innerHTML);//document.getElementById("myList1").appendChild(cln);//复制在myList1最后document.getElementById("myList1").insertBefore(cln,lis[0]);//复制在指定位置之前}</script></body></html>
请尝试把 参数cloneNode设置为 false将仅仅克隆空的 LI 元素
0 0
- web.随笔之创建新元素与复制元素
- JS创建新元素组与删除当前元素组
- Jquery创建新元素
- 页面创建新元素
- jQuery创建新元素
- web.js.创建元素
- Python之添加新元素
- Python之添加新元素
- 022动态创建网页新元素
- web前端小记之随笔
- SqlServer复制与创建
- jQuery向匹配元素中插入新元素
- HTML5之浏览器支持、新元素
- 新元素之section,article,aside
- WEB应用之: JS 数组的遍历与元素删除
- jQuery创建新元素简述(Create New Element)
- 在文档中创建和插入新元素
- jquery 节点操作(动态创建元素/添加元素/清空元素/复制元素)
- 文章标题
- windows+mysql+python+navicat入坑指南
- 我为什么写博客
- 寻找前n个数的方法
- redis之持久化
- web.随笔之创建新元素与复制元素
- APP启动加载界面(第一种)
- iOS --- UI系列之UIColoer
- angular自定义指令作用域&--传递引用
- 【已解决】IE无法上网、有道云PC客户端无连接
- http的请求响应过程
- 网页调用谷歌浏览器打印指定区域为pdf
- Android开发技巧——实现设计师给出的视觉居中的布局
- PAT 乙级 1028. 人口普查(20)