js之insertBefore(newElement,oldElement)

【js之insertBefore(newElement,oldElement)】的更多相关文章

js之insertBefore(newElement,oldElement)

insertBefore的用法,以及注意事项,并且模仿编写insertAfter()方法 DOM提供的一个名为insertBefore()的方法,用来将一个新元素插入到现有的元素的前面. 使用这个方法的条件: 想插入的新元素是谁newElement,我们创建的元素插入到谁的前面 2个元素拥有共同的父级,这是这个方法的关键,即使新元素和已经存在的元素是同级的,那么他们一定有共同的父级,最基本的父级那就是body <!DOCTYPE html> <html> <head>…

廖雪峰js教程笔记13 插入DOM

当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做? 如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容,相当于"插入"了新的DOM节点. 如果这个DOM节点不是空的,那就不能这么做,因为innerHTML会直接替换掉原来的所有子节点. 有两个办法可以插入新的节点.一个是使用appendChild,把一个子…

JS脚本收藏（一些实用的函数）

一.共享onload事件这个函数的名字是addLoadEvent,它是由Simon Willison 编写的.它只有一个参数:打算在页面加载完毕时执行的函数的名字. 下面是addLoadEvent函数将要完成的操作. ·把现有的window.onload事件处理函数的值存入变量oldonload. ·如果在这个处理函数上还没有绑定任何函数,就像平时那样把新函数添加给它. ·如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有指令的末尾. 下面是addLoadEvent函数的代码清单:…

js模拟高级语言的重载

js以递归的方式模拟高级语言的重载,我以添加元素节点为例子: //现有的子元素之前插入一个新的子元素 var before = function(elem,newElement,targetElement){ if(targetElement === undefined) return before(newElement ? newElement.parentNode : null,elem,newElement); //兼容ie7以下目标节点为空报错的问题 if(!targetElement)…

关于ajaxfileupload.js一些问题和上传图片就立即显示图片功能

ajaxfileupload.js是上传文件的一个插件,最近碰到的一个问题是在谷歌浏览器上传文件之后,原文本框中的文件名称消失,网上搜了好长时间也没有十分满意的答案.无刷新上传文件我想到的只有ajax,ajaxfileupload.js插件非常简单,看个简单例子就会使用,不用明白js里面写的到底是什么.流程就是就是先利用jQuery的选择器获得file文件上传框中的文件路径值,然后js就会动态的创建一个iframe和表单,并在里面建立一个新的file 文件框,提供post方式提交到后台.最后,返…

JavaScript之insertBefore()和自定义insertAfter()的用法。

在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还有其他的元素,这个时候貌似就没有办法了,我们的真实想法是,让新创建的元素紧更在图片列表的后面,而不管这个列表出现在文档的那个地方.下面我们就来介绍两个方法来帮助解决这个问题. 1.insertBefore() DOM提供了名为inerBefore()的方法,这个方法的作用是:把一个新元素插入到一个现…

【js编程艺术】小制作五

1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Design</title> <link rel="stylesheet" type="text/css" href="styles/list.css"> </head> <body&g…

【js 编程艺术】小制作一

最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>image gallery</title> <link rel="stylesheet" type="text…

ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

/* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpload 接受 json 对象参数参数说明: fileElementId:必选,上传文件域ID url:必选,发送请求的URL字符串 fileFilter:可选,限定上传文件的格式(.jpg,.bmp,.gif,.png) fileSize:可选,0 为无限制(IE浏览器不兼容) data:可选,将…

JS插入新的节点

insertBefore() 语法: insertBefore(newchild,refchild) newchild 插入新的节点 refchild 在此节点前插入新节点 <ul id="myList"> <li>Coffee</li> <li>Tea</li> </ul> function myFunction(){ var newItem=document.createElement("LI&quo…

js中的DOM操作汇总

一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attribute,属性 Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = document.createTe…

前端面试(原生js篇) - DOM

根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重于是我总结了一些关于 js 基础的面试对话,有的当时没答上来,就在总结的时候就加了点料忽然觉得又该读一遍犀牛书了... 一.面试对话问:你知道 js 是由哪三部分构成的么? 答:有 js 的语法核心 ECMAScript,还有文档对象模型 DOM,以及浏览器对象模型 BOM. 问:那你觉得 dom 的作用是什么? 答:喵喵喵??? 问:我换一个问…

ajaxupload.js调用始终进入error回调

现象:脚本调用成功,文件上传也成功,但是始终进入error的回调函数. 1. ajaxfileupload.js jQuery.extend({ handleError: function( s, xhr, status, e ){ // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global c…

js上传文件带参数，并且，返回给前台文件路径，解析上传的xml文件，存储到数据库中

ajaxfileupload.js jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '&qu…

ajaxfileupload.js ajax上传文件(含application/json)

jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(ty…

JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

<!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><meta content="text/html; cha…

JS文档DOM

访问指定节点通过document节点获取 document.getElementById(elementId) document.getElementsByName(elementName) document.getElementsByName('radiogroup1')[0] 该方法的返回值是一个数组,若要获取,可以通过返回数组中下标值进行获取 document.getElementsByTagName(tagName) var a=document.getElementsByTag…

【js编程艺术】之有用的函数

学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof window.onload != "function"){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } //功能:将新节点newElement添加到目标节点targetE…

JS异步上传Excel 并使用NPOI进行读写操作

实现功能导入——客户端使用 ajaxfileupload.js 插件实现Excel的异步上传,并在服务端解析成JSON字符串返回页面导出——将页面中的grid表拼接成JSON串上传至服务器,在服务端新建Excel并将数据导入,随后返回url给用户下载客户端(Test.aspx) 页面上需要实现的效果是显示一个“导入”按钮,hover时会显示标准格式图片,点击触发上传事件,选择Excel文件后上传到服务器,HTML代码如下 PS:使用了Bootstrap样式,也可以自己定义.“loading…

JS用例

showBtn :class="{getInput:showBtn}"v-if="showBtn" showBtn: true, this.showBtn = false; this.showBtn == true JSON.parse('{"p": 5}', function(k, v) { document.write(k);document.write(v); }); js button 图片的动态替换 <Button size=&q…

JQuery与JS比较

备注:原文转自脚本之家,原文地址:http://www.jb51.net/article/39494.htm 转载仅为方便统一整理收藏内容,别无他意 JQuery与JS的比较: jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单.人家怎么说的来着,jquery就是要用更少的代码,漂亮的完成更多的功能.JavaScript 与JQuery 常用方法比较: 1.加载DOM区别 JS window.onload function first()…

读js DOM编程艺术总结

第一章主要介绍一些历史性问题,javascript是Netcape和sun公司合作开发的. 第二章JavaScript语法: 1,数据类型:(弱类型)字符串,数值,布尔值(只有true和false,不是字符串)数组,对象 2,函数: 3,对象:(属性和方法),包括内建对象,自定义对象还有浏览器提供的预定义的宿主对象(Form,Image,Element) 第三章DOM: 1,D(document)O(object)M(model)文档对象模型 2,节点分为,元素节点,文本节点,属性节点. 3,获…

js添加元素代码

<!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> <meta http-equiv="Content-…

ajaxfileupload.js

jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if(ty…

适用于jquery1.11.1的ajaxfileupload.js

ajaxfileupload源码解决上传成功不走success的问题解决高版本jquery兼容性问题 jQuery.extend({ createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" sty…

跟踪js文件作为iframe页面不起作用时(淘宝天猫)

跟踪文件 (function(win, doc) { var s = doc.createElement("script"), h = doc.getElementsByTagName(]; if (!win.alimamatk_show) { s.charset = "gbk"; s.async = true; s.src = "http://a.alimama.cn/tkapi.js"; h.insertBefore(s, h.firstCh…

javascript insertBefore 和 appendChild

js的appendChild()方法 :在一个元素内部追加一个子节点. js的insertBefore()方法:在一个元素内部指定的子节点之前插入子节点. 很明显,appendChild()方法只需要一个条件就可以了,那就是父元素. 而后者则需要两个条件,一个是父元素,一个是要在父元素哪个子节点前插入. 下面是两种情况的例子对比: var oDiv=document.getElementById('div1'); var oNew=document.createElement('div'); o…