javascript拓展DOM操作 prependChild insertAfert_DOM

以下是自己写的一个拓展函数,虽然网上已经有了,仅当做自己练兵。。。

复制代码 代码如下:

function prependChild(o,s){
if(s.hasChildNodes()){
s.insertBefore(o,s.firstChild);
}else{
s.appendChild(o);
}
}
function insertAfert(o,s){
if(s.nextSibling!=null){
s.parentNode.insertBefore(o,s.nextSibling);
}else{
s.parentNode.appendChild(o);
}
}

时间: 2025-01-26 16:05:44

javascript拓展DOM操作 prependChild insertAfert_DOM的相关文章

【JavaScript】DOM操作表格

DOM操作表格 1.利用JavaScript动态增加.删除表格内容 页面如图 注:首先说个小问题,有些如制定按钮点击事件的js代码,放在html文档最后可以,放在最前面(<head>标签内)不可以,原因是html文档是自上往下读取,当读到最上面的js.代码时,并没有读取相应的DOM标签,所以制定的按钮功能没有效果,如果非要放在上面,可以指定到window.onload方法中去: <head> <span style="white-space:pre">

【JavaScript】DOM操作下拉框

DOM操作下拉框 这次要实现一个效果,如下图: 在左边选框里选择一个选项,点击"-->",就会把该选项选到右边框里. 在左边选框里选择多个选项,点击"==>",就会把多个选项选到右边框里. 在右边选框里选择一个选项,点击"-->",就会把该选项选到左边框里. 在右边选框里选择多个选项,点击"==>",就会把多个选项选到左边框里. 效果就是这样,下面我们来实现它: 实现源代码: <!DOCTYPE

使用javaScript和DOM操作svg元素

基本的svgDOM树: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="

JavaScript DOM操作表格及样式_基础知识

一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appe

JavaScript——DOM操作——Window.document对象详解_javascript技巧

一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docunment.getElementById("id");将找到的元素放在变量中:     docunment.getElementsByName("name"):根据name找,找出来的是数组:     docunment.getElementsByTagName("name"):根据标签

整理JavaScript对DOM中各种类型的元素的常用操作_基础知识

节点类型nodeType以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr 3: 文本text 8: 注释comments 9: 文档document nodeName,nodeValue 节点关系childNodes: 每个节点都有一个childNodes属性,其中保存着一个NodeList对象 firstChild: 等同于childNodes[0] lastChild: 等同于childNodes.length-1 同时通过使用列表中每个节点的previ

javascript DOM 操作自定义创建HTML代码实例

创建自定义的HTML元素 我们可以使用 document.registerElement() 创建自定义的HTML元素,这个函数返回的是一个构造函数,第一个参数是用来声明自定义HTML元素的名称,第二个参数是可选的,用来描述原型的对象,自定义功能的元素. 在下面的示例中,简单的创建了一个新的HTML元素<x-treehouse>,并且将它放入到页面中: var XTreehouseElement = document.registerElement('x-treehouse');documen

为什么说JavaScript中的DOM操作很慢

一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局 (layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的 实践以及一些优化方案. 浏览器是如何呈现一张页面的 一个浏览器有许多模块,其中负责呈现页面的是渲

javascript dom 操作优化

DOM 操作优化 首先澄清两个概念--Repaint 和 Reflow:Repaint 也叫 Redraw,它指的是一种不会影响当前 DOM 的结构和布局的一种重绘动作.如下动作会产生 Repaint 动作: 不可见到可见(visibility 样式属性); 颜色或图片变化(background, border-color, color 样式属性); 不改变页面元素大小,形状和位置,但改变其外观的变化 Reflow 比起 Repaint 来讲就是一种更加显著的变化了.它主要发生在 DOM 树被操