关于js中插入删除节点的总结
2016-04-13 17:21
549 查看
1.在html中新增加一个节点或者是改变某个节点的内容
一种是使用innerHTML(标准),用法链接:http://www.w3school.com.cn/jsref/prop_html_innerhtml.asp
注意:innerHTML与innerText的区别:前者的html标签会被浏览器识别,后者则是当做text的,标签不会被识别。
例子:(任务17代码片段)
注释:这里是在table里面增加了<tr>标签内容,渲染表格。
另外一种是使用创建节点的办法。用法链接:http://www.runoob.com/jsref/met-document-createelement.html
createElement->createTextNode->appendChild(->appendChild)或者createElement->innerText(->appendChild)
例子:
或者
ps:还有一种创建虚拟节点(创建文档碎片节点)的方法createDocumentFragment()
这是考虑到当要添加大量的节点的时候,如果直接添加新节点,速度会比较慢。所以可以先创建文档碎片,把数据一起写入它,然后appenChild到原始html里面。
用法与之前类似
例:(任务18代码片段)
2.关于查找节点
其实我每次解决类似的问题时,总会忘记怎么写
,来来好好记一下。
关于DOM元素:parentNode,firstChild,lastChild,childNodes,insertBefore(),removeChild(),replaceChild()等等用的比较多。用法链接:http://www.w3school.com.cn/jsref/dom_obj_all.asp,http://www.w3school.com.cn/htmldom/dom_methods.asp
如果是关于table对象的:deleteRow(),insertRow()等方法,rowIndex属性返回某一行在表格的行集合中的位置。用法链接http://www.w3school.com.cn/jsref/dom_obj_table.asp,http://www.w3school.com.cn/jsref/prop_tablerow_rowindex.asp
这里插入一个事件代理的情况
(死记吧),用法链接: http://blog.csdn.net/weinideai/article/details/3835839
例子(任务18代码片段):
。。。待续
一种是使用innerHTML(标准),用法链接:http://www.w3school.com.cn/jsref/prop_html_innerhtml.asp
注意:innerHTML与innerText的区别:前者的html标签会被浏览器识别,后者则是当做text的,标签不会被识别。
例子:(任务17代码片段)
function renderAqiList() { var itemHTML= "<tr><td>城市</td><td>空气质量</td><td>操作</td></tr>"; for(var item in aqiData){ itemHTML+="<tr><td>" + item + "</td><td>" + aqiData[item] + "</td><td><button> \ 删除 </button></td></tr>"; } aqitable.innerHTML=itemHTML; }
注释:这里是在table里面增加了<tr>标签内容,渲染表格。
另外一种是使用创建节点的办法。用法链接:http://www.runoob.com/jsref/met-document-createelement.html
createElement->createTextNode->appendChild(->appendChild)或者createElement->innerText(->appendChild)
例子:
<pre name="code" class="javascript"><span style="font-size:14px;">var btn=document.createElement("BUTTON"); </span>var t=document.createTextNode("CLICK ME");btn.appendChild(t);
或者
<span style="font-size:14px;">var btn=document.createElement("BUTTON"); btn.innerText="click me";</span>之后再把这个btn节点appendChild到需要的父节点里。
ps:还有一种创建虚拟节点(创建文档碎片节点)的方法createDocumentFragment()
这是考虑到当要添加大量的节点的时候,如果直接添加新节点,速度会比较慢。所以可以先创建文档碎片,把数据一起写入它,然后appenChild到原始html里面。
用法与之前类似
例:(任务18代码片段)
<pre name="code" class="javascript"><span style="font-size:14px;">
var fragment = document.createDocumentFragment(); numQueue.innerHTML=""; for (var i=0;i<arr.length;i++){ var number=arr[i]; var node = document.createElement("span"); node.innerText=number; node.id =i; fragment.appendChild(node); //创建一个虚拟节点 } numQueue.appendChild(fragment);</span>
2.关于查找节点
其实我每次解决类似的问题时,总会忘记怎么写
,来来好好记一下。
关于DOM元素:parentNode,firstChild,lastChild,childNodes,insertBefore(),removeChild(),replaceChild()等等用的比较多。用法链接:http://www.w3school.com.cn/jsref/dom_obj_all.asp,http://www.w3school.com.cn/htmldom/dom_methods.asp
如果是关于table对象的:deleteRow(),insertRow()等方法,rowIndex属性返回某一行在表格的行集合中的位置。用法链接http://www.w3school.com.cn/jsref/dom_obj_table.asp,http://www.w3school.com.cn/jsref/prop_tablerow_rowindex.asp
这里插入一个事件代理的情况
(死记吧),用法链接: http://blog.csdn.net/weinideai/article/details/3835839
例子(任务18代码片段):
function randomOut(event) { event = event||window.event; var target = event.target||event.srcElement; var index = target.getAttribute("id"); if(target.tagName.toLowerCase()=="span") { // alert(target.tagName); arr.splice(index, 1); render(); } return 0; } numQueue.onclick = randomOut;
。。。待续
相关文章推荐
- JS 讲解时效缓存与延迟处理
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 如何组织前端javascript代码
- 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
- D3.js初体验 —— 线型图表与坐标轴的绘制
- 【JavaScript】DAG(有向无环图),以及相关的JS库
- 转载:如何理解jsp页面中的“<base href="<%=basePath%>">”?
- js时间转换