JavaScript 创建、插入和删除元素
来源:互联网 发布:七腾软件科技有限公司 编辑:程序博客网 时间:2024/06/05 14:57
创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子:为ul插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style></style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onload=function (){ var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value; //父.appendChild(子节点) oUl.appendChild(oLi); }}</script></head><body><input id="txt1" type="text" /><input id="btn1" type="button" value="创建Li"/><ul id="ul1"> <li>aaa</li></ul></body></html>
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子:倒序插入li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style></style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">//父.insertBefore(子节点, 谁之前)window.onload=function (){ var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; if(aLi.length==0) { oUl.appendChild(oLi); } else { oUl.insertBefore(oLi, aLi[0]); } }}</script></head><body><input id="txt1" type="text" /><input id="btn1" type="button" value="创建Li"/><ul id="ul1"></ul></body></html>
删除DOM元素
removeChild(节点) 删除一个节点
例子:删除li
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style></style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onload=function (){ var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { oUl.removeChild(this.parentNode); } }}</script></head><body><ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li></ul></body></html>
参考:JavaScript
阅读全文
0 0
- JavaScript 创建、插入和删除元素
- javascript创建元素和删除元素
- 创建,添加,插入和删除DOM元素
- 元素的创建,插入,替换和删除
- Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片
- 创建元素和删除元素
- JavaScript创建、添加、删除元素
- DOM操作--创建、插入、删除元素
- jQuery 创建和插入元素
- jQuery 创建和插入元素
- 顺序表中静态顺序表的创建、插入和删除一个元素(源码分析)
- 头插法和尾插法创建链式循序表 遍历、插入、删除、查找元素等操作
- 红黑树元素的插入和删除
- 数组元素的插入和删除
- 链式的队列的创建、插入、删除、遍历、取队首元素
- 创建一个链表,插入删除,指定元素
- JavaScript splice() 方法 插入 删除或替换数组的元素
- JavaScript splice 方法:插入、删除或替换数组的元素
- H5新增特性
- unity3D基础之渲染管线的设计方法学习路线 讲义源码
- messenger进程之间的通讯
- 父级元素的 font-size:0 解决子代的inline或inlien-block的换行或图片空隙问题
- TCP/IP协议族【第8章地址解析协议APR】
- JavaScript 创建、插入和删除元素
- JAVA构造器
- php 添加 error_log
- Java IO 经典教程 (上) (翻译自jenkov.com)
- html中的用户注册与删除
- 侧拉加XListView分页加载
- Django Web 开发指南--第一章笔记
- 5.3
- java数组