DOM操作之CRUD操作

简介: 1.append():父元素将子元素追加到末尾对象1.append(对象2):将对象2添加到对象1元素内部,并且在尾部2.prepend():父元素将子元素追加到开头对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头3.appendTo():对象1.appendTo(对象2):将对象1添加到对象2内部,并且在尾部4.prependTo():对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头5.after():添加元素到元素后面对象1.after(对象2):将对象2添加到对象1后面。对象1和对象2是兄弟关系

DOM操作之CRUD操作



1.append():父元素将子元素追加到末尾


对象1.append(对象2):将对象2添加到对象1元素内部,并且在尾部


2.prepend():父元素将子元素追加到开头


对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头


3.appendTo():


对象1.appendTo(对象2):将对象1添加到对象2内部,并且在尾部


4.prependTo():


对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头


5.after():添加元素到元素后面


对象1.after(对象2):将对象2添加到对象1后面。对象1和对象2是兄弟关系

6.before():添加元素到元素前面


对象1.before(对象2):就对象2添加到对象1前面。对象1和对象2是兄弟关系


7.insertAfter():


对象1.insertAfter(对象2):就对象2添加到对象1后面。对象1和对象2是兄弟关系


8.insertBefore():


对象1.insertBefore(对象2):将对象2添加到对象1前面。对象1和对象2是兄弟关系


9.remove():移除元素


对象.remove():就对象删除掉


10.empty():清空元素的所有后代元素


对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点


目录
相关文章
|
6月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
247 0
|
6月前
|
JavaScript 前端开发
低效的DOM操作(js的问题)
低效的DOM操作(js的问题)
23 0
|
5月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
59 2
JavaScript基础-DOM操作:查找、创建、修改
|
5月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
44 2
|
5月前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
37 1
|
4月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$("p")`、`$("#myDiv")`、`$(".myClass")`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
33 0
|
5月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
71 2
|
5月前
|
JSON JavaScript 数据格式
技术好文:tabel表格的dom操作
技术好文:tabel表格的dom操作
26 0
|
6月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
46 2
|
6月前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。