day35—JavaScript操作元素(创建、删除)
转行学开发,代码100天——2018-04-20
JavaScript对DOM元素的创建、删除操作。
1.创建DOM元素
appendChild方法
- createElement(ochild);
- oparent.appendChild(ochild)
insertBefore方法
- createElement(ochild);
- insertBefore(ochild,opos);
如通过按钮操作,创建元素
<input id = "txt" type="text" name="text">
<input id ="Abtn" type="button" value="向前添加" name="添加">
<input id ="Bbtn" type="button" value="向后添加" name="添加">
<ul id="ull"></ul>
<script type="text/javascript">
window.onload = function () {
var oBtn0 = document.getElementById("Abtn");
var oBtn1 = document.getElementById("Bbtn");
var oUl = document.getElementById("ull");
var oTxt = document.getElementById("txt");
// var oLi = document.createElement('li');
//向前插入
oBtn0.onclick = function(){
if (oTxt.value=="") {
alert("请填写添加内容");
}else
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
var aLi = oUl.getElementsByTagName('li');
if (aLi.length>0) {
oUl.insertBefore(oLi,aLi[0])
}else
oUl.appendChild(oLi);
}
}; //向后插入 oBtn1.onclick =function(){
if (oTxt.value=="") {
alert("请填写添加内容");
}else
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
//父节点.append(子节点)
oUl.appendChild(oLi);
}
};
};
</script>
通过上述代码实现li元素及其内容的添加。
但是,由于浏览器兼容性问题,在向前插入的代码段中对li个数进行了判断
//向前插入
oBtn0.onclick = function(){
if (oTxt.value=="") {
alert("请填写添加内容");
}else
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
var aLi = oUl.getElementsByTagName('li');
if (aLi.length>0) {
oUl.insertBefore(oLi,aLi[0])
}else
oUl.appendChild(oLi);
}
};
2.元素的删除
父级.removeChild(子节点); //彻底删除元素
如:
<div id="container">
<ul id="ul">
<li>asjhasf<a href="javascript:;">删除</a></li>
<li>432sdf<a href="javascript:;">删除</a></li>
<li>asj23fsfhasf<a href="javascript:;">删除</a></li>
<li>23tvasjhasf<a href="javascript:;">删除</a></li>
</ul>
</div>
通过选择“删除”即将当前行内容删除
JavaScript实现中,首先获取ul父级节点,即当前a标签。利用removeChild方法删除
//删除元素功能 var oull = document.getElementById("ul");
var oa = oull.getElementsByTagName("a");
for (var i = 0; i < oa.length; i++) {
oa[i].onclick = function()
{
oull.removeChild(this.parentNode);
}
}
3.文档碎片:DocumentFragment
一个很形象的比喻,即文档碎片相当于生活中的购物袋。当我们购买的物品较多时,往往通过购物袋打包拎回家。当然,物品较少时直接拎回去得了。
于此类似,当我们需要插入很多元素时,先将插入的元素装入文档碎片中,最后将该文档碎片添加到父节点即可。
(果真,计算机世界是对现实生活的模拟啊)
//文档碎片 var aul = document.getElementById("oul");
var oFrag = document.createDocumentFragment();
for (var i = 0; i < 1000 ; i++) {
var oli = document.createElement("li");
oFrag.appendChild(oli);
} aul.appendChild(oFrag);
文档碎片的使用对网页性能影响不大,已较少使用。
day35—JavaScript操作元素(创建、删除)的更多相关文章
- javascript 操作元素属性的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript操作元素属性方法总结
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript操作元素的css样式
我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...
- DOM增删操作(创建删除表格)
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- document--文档中的操作,操作属性、操作样式、操作元素
---恢复内容开始--- document操作: 1.找元素 getE.. 2.操作内容 非表单:innerHtml 表单:value 3.操作属性 ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
- DOM操作(二)对元素的操作(创建,追加,删除)
1 创建新的 HTML 元素 (节点) var divDom=document.createElement('div'); 2 添加新元素到尾部 element.appendChild(para); ...
随机推荐
- git比较重要但是又容易忘记的操作
git rebase head~1 把多次commit合并成一次 git reset head 撤销已缓存的内容 git checkout . git stash 去除改动未提交的代码
- Java相关面试题总结+答案(五)
[异常] 74. throw 和 throws 的区别? throw 是真实抛出一个异常: throws 是声明可能会抛出一个异常. 75. final.finally.finalize 有什么区别? ...
- 01背包(第k优解)
Bone Collector II Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- [Codeforces 1197E]Culture Code(线段树优化建图+DAG上最短路)
[Codeforces 1197E]Culture Code(线段树优化建图+DAG上最短路) 题面 有n个空心物品,每个物品有外部体积\(out_i\)和内部体积\(in_i\),如果\(in_i& ...
- js超简单冒泡算法
点击按钮--从大到小排序,可以通过代码中大于号小于号的选择来判定从小到大或者从大到小. <!DOCTYPE html> <html> <head> <titl ...
- 如何设置移动端的tab栏
这是添加tab栏的代码: { "id": "tabBar1", "st ...
- hadoop项目开发运行报错(log4j:WARN No appenders could be found for logger (org.apache.hadoop.metrics2.lib.MutableMetricsFactory).)
使用hadoop+myeclipse开发项目是测试运行报错: log4j:WARN No appenders could be found for logger (org.apache.hadoop. ...
- python OpenCV视频的读取及保存
import cv2 cap = cv2.VideoCapture('rtsp://admin:hik12345@192.168.3.160/Streaming/Channels/1') fourcc ...
- VS 2019编辑含有资源文件.resx的项目时提示MSB3086 任务未能使用 SdkToolsPath 或注册表项找到“al.exe”
环境: Win10 X64, VS2019 错误提示: 错误 MSB3086 任务未能使用 SdkToolsPath“”或注册表项“HKEY_LOCAL_MACHINE\SOFTWARE\Micros ...
- file 显示文件的类型
1. 命令功能 file命令是确定文件类型,也可以辨识一些文件的编码格式.通过文件的头部信息来获取文件类型.windows是通过扩展名来确定文件类型. 2. 语法格式 file [option] ...