- 浏览: 61911 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
77095729:
刚好找到,谢谢 分享
Eclipse中vi插件使用方法 快捷键 -
leongod:
wangying641588 写道楼主在哪里Ctrl+c,Ct ...
面试前准备 -
wangying641588:
楼主在哪里Ctrl+c,Ctrl+v 的这些内容,好古董啊!真 ...
面试前准备 -
leongod:
zhao_chong 写道跟真的似的,整那么多虚的不如好好提升 ...
面试前准备 -
leongod:
thinmonkey 写道楼主就是这样面试的?
楼主是给自己也 ...
面试前准备
document.createElement()的用法
分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验。
document.createElement()是在对象中创建一个对象,要与appendChild() 或
insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()
方法在节点的子节点列表任意位置插入新的节点。
下面,举例说明document.createElement()的用法。<div
id="board"></div>
例1:
<script
type="text/javascript">
var board =
document.getElementById("board");
var e =
document.createElement("input");
e.type =
"button";
e.value = "这是测试加载的小例子";
var object =
board.appendChild(e);
</script>
效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。
例2:
<script type="text/javascript">
var board = document.getElementById("board");
var e2 =
document.createElement("select");
e2.options[0] = new
Option("加载项1", "");
e2.options[1] = new Option("加载项2",
"");
e2.size = "2";
var object =
board.appendChild(e2);
</script>
效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。
例3:
<script type="text/javascript">
var board = document.getElementById("board");
var e3 =
document.createElement("input");
e4.setAttribute("type",
"text");
e4.setAttribute("name", "q");
e4.setAttribute("value", "使用setAttribute");
e4.setAttribute("onclick", "javascript:alert('This is a test!');");
var object = board.appendChild(e3);
</script>
效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。
当点击这个文本框时,会弹出对话框“This is a test!”。
根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text" 和
e.setAttribute("type","text")效果是一致的。
下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。
比如我们要在下面这个div中插入一个子节点P时:<div id="test"><p
id="x1">Node</p><p>Node</p></div>
我们可以这样写:
<script
type="text/javascript">
var oTest =
document.getElementById("test");
var newNode =
document.createElement("p");
newNode.innerHTML = "This is a
test";
//测试从这里开始
//appendChild方法:
oTest.appendChild(newNode);
//insertBefore方法:
oTest.insertBefore(newNode,null);
</script>
通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。
在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null)
,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:
<script
type="text/javascript">
var oTest =
document.getElementById("test");
var refChild =
document.getElementById("x1");
var newNode =
document.createElement("p");
newNode.innerHTML = "This is a
test";
oTest.insertBefore(newNode,refChild);
</script>
效果:这个例子将在x1节点前面插入一个新的节点
又或:
<script
type="text/javascript">
var oTest =
document.getElementById("test");
var refChild =
document.getElementById("x1");
var newNode =
document.createElement("p");
newNode.innerHTML = "This is a
test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
效果:这个例子将在x1节点的下一个节点前面插入一个新的节点
还可为:
<script
type="text/javascript">
var oTest =
document.getElementById("test");
var newNode =
document.createElement("p");
newNode.innerHTML = "This is a
test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
从这几个例子中得出:
appendChild()
方法在节点的子节点列表末添加新的子节点。
insertBefore()
方法在节点的子节点列表任意位置插入新的节点。
今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素
var
inputObj = document.createElement
("<input type='text' size='8'
style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly
>");
但是这样的情况在ff下是不兼容的。
还有就是特别注意input元素的创建:与 input
有关的元素有很多,比如:checkbox、radio、submit、reset...,因此创建 input 是个很特殊的用法。
创建不同的
input 正确的做法是:
<div id="board"></div>
<script
type="text/javascript">
<!--
var board =
document.getElementById("board");
var e =
document.createElement("input");
e.type = "radio"; //紧接着上一行写
var obj =
board.appendChild(e);
obj.checked = true;
//如下写法也是正确的:
//e.checked =
true;
-->
</script>
针对 input,在 Netscape、Opera 和 Firefox 中
e.type 既可以在 appendChild 之前,也可以在其之后。但在 IE 中 type 属性必须在前,其它属性必须在后。
IE
创建元素,还有一个特点,就是可以连同属性一同创建,比如:var e = document.createElement("<input
type='radio' name='r' value='1' />");
这在其它浏览器中是不行的,所以我们也不支持。
总结:
•针对非 input
元素,各浏览器中,既可以把对元素属性的改变写在显示元素(insertBefore 或 appendChild)之前,也可以在其后。
•针对 input
元素,为了兼容 IE,type 属性写在显示元素(insertBefore 或 appendChild)之前,其它属性写在其后。
推荐:
•除了 input 元素的 type 属性写在显示元素(insertBefore 或
appendChild)之前外,其它属性都写在显示元素之后。
•改变属性时,对写在显示元素(insertBefore 或
appendChild)之前的用 createElement 的返回值,对写在显示元素之后的用 insertBefore 或 appendChild 的返回值。
1.var echkbox=document.createElement("input");
2.echkbox.setAttribute("type","checkbox");
3.echkbox.setAttribute("id","inputid");
4.echkbox.setAttribute("name","inputname");
5.echkbox.setAttribute("value","inputvalue");
6.var
addhere=document.getElementById("someElementId");
7.addhere.appendChild(echkbox);
8.echkbox.setAttribute("checked","checked");
9.alert(document.getElementById("inputid").checked);
<!--document方法:
getElementById(id)
返回指定结点的引用
getElementsByTagName(name)
返回文档中所有匹配的元素的集合
createElement(name)
创建指定类型的新结点
createTextNode(text)
创建一个纯文本结点
element方法:
getAttribute(id)
返回指定属性的值
setAttribute(id,value)
给属性赋值
removeAttribute(id)
移除指定属性和它的值
getElementsByTagName(name)
返回结点内所有匹配的元素的集合
node方法:
appendChild(child)
给指定结点添加一个新的子结点
removeChild(child)
移除指定结点的子结点
replaceChild(newChild,oldChild)
替换指定结点的子结点
insertBefore(newChild,refChild)
在同一层级的结点前面插入新结点
hasChildNodes()
如果结点有子结点则返回true
node属性:
nodeName
以字符串的格式存放结点的名称
nodeType
以整型数据格式存放结点的类型
nodeValue
以可用的格式存放结点的值
parentNode
指向结点的父结点的引用
childNodes
指向子结点的引用的集合
firstChild
指向子结点结合中的第一个子结点的引用
lastChild
指向子结点结合中的最后一个子结点的引用
动态加载js
var Rash=true;
var msg="";
function norash()
{
if (confirm("确定要取消吗"))
Rash=false;
}
function rashit()
{
setInterval('getrss()',Inttime);
}
function getrss()
{
if (Rash==true)
{
head=document.getElementsByTagName('head').item(0);
script=document.createElement('script');
script.src='INCLUDE/AutoUpdate.asp';
script.type='text/javascript';
script.defer=true;
void(head.appendChild(script));
window.status=msg;
}
}
rashit();
发表评论
-
mysql+myca搭建稳定高可用集群,负载均衡,主备复制,读写分离
2016-10-16 11:09 1110数据库性能优化普遍采用集群方式,oracle集群软硬件投入 ... -
Tomcat做成系统服务+ 生产服务器性能优化
2016-01-13 10:42 642服务器优化: http://www.oschina.net ... -
如何修改tomcat进程的名称(windows)
2015-12-27 13:47 14701、window平台: 打开tomcat_h ... -
有图有真相。windows环境下配置tomat+redis+nginx集群共享session
2015-11-10 16:50 2238一直想搞一下tomcat集 ... -
提高AJAX客户端响应速度
2013-06-04 23:08 868提高AJAX客户端响应速度 (文:包一磊) AJAX ... -
TOMCAT启动参数配置
2013-06-04 01:03 995set JAVA_OPTS=-server -Xms1024m ... -
PowerDesigner15 逆向工程不生成physical option及NAME/CODE转换
2013-06-02 07:45 936在使用PowerDesigner15 逆向工程转换PDM后 ... -
改善JAVA程序的151个建议(一)
2012-12-29 13:03 0第一章 通用方法和原则 (P6)KISS原则: keep ... -
spring原理
2011-09-04 22:10 2425什么是Spring,他有什么特 ... -
JNIEnv的哲学
2011-07-25 14:18 1170Java通过JNI 机制调用c/c+ ... -
听新浪微博视频谈高性能站点
2011-07-06 00:15 7661.用redis. http://baike.baidu.c ... -
Eclipse中vi插件使用方法 快捷键
2011-07-02 08:24 3638原创博文, 版权所有!转载请注明出处:http://blog. ... -
commons-dbutils一步学通
2011-06-05 22:57 13721. 介绍 commons-dbutils是Apa ... -
Java日期操作常用方法
2011-05-31 11:39 776代码:/** * 取得指定月份的第一天 * * @param ... -
myeclipse8集成jbpm4方法,绝对可以用
2011-05-31 11:37 902myeclipse8集成jbpm4时,出现更新较慢的情形.请按 ... -
swing界面开发
2011-05-31 11:34 1234最近移植c#开发项目,重写为java版本,对于本地应用部分采用 ... -
JPanel放置到JScrollPane里面并显示滚动条
2011-05-31 11:33 6470一开始,我是知道不能直接在JScrollPane对象里用add ... -
java 不重复随机数生成
2011-05-31 11:31 842public static void main(String[ ...
相关推荐
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
var iframe = document.createElement('iframe'); iframe.name = 'ifr'; //iframe.setAttribute('name', 'ifr'); //这样也不行 上面两种方式都无法设置。后来找到原来也可以这样创建 JavaScript代码 var iframe = ...
今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 代码如下: var inputObj = ...
//定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document...
用法: html2canvas(document.body, { allowTaint: true, taintTest: false, ... var newImg = document.createElement("img"); newImg.src = dataUrl; document.body.appendChild(newImg); } });
当我们需要动态生成DOM对象的时候,会使用createElement的方法创建。但是在IE和Firefox下,createElement方法是有差异的。 在 IE 中,可以使用以下两种方式来创建一个元素: 1、document.createElement(‘table’) 2...
用法 html和svg函数将字符串模板具体化为DOM。 如果字符串模板具有多个顶级节点,则函数将返回DocumentFragment 。 // Create a DIV element. const div = html ` < div> </ div> ` ; // similar to html`<div>` /...
JSX-IR的DOM渲染器安装npm install jsx-to-dom 用法转堆babel . transform ( code , { plugins : [ 'jsx-to-dom/babel-plugin' ] , blacklist : [ 'react' ]} ) ; 或描述的任何其他方式,只需将“'jsx-to-dom / ...
主要介绍了JS document对象简单用法,结合完整实例形式详细分析了JS document对象获取、输出、节点调用等相关操作技巧,需要的朋友可以参考下
使用方法:请把文件放置到 【你的项目位置】/content 目录下 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = ...
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下:var oNewP = $(“使用jQuery创建的...
利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的...
首先创建一个iframe对象,使用document.createElement方法创建 var iframe = document.createElement("iframe"); document.body.appendChild(iframe) 然后,获取到iframe里面的window对象 var iframeWin = if
createDocumentFragment 如果要在一个节点上一次性插入多个元素...var child = document.createElement(`'div'`); var text = document.createTextNode(`'' + i);` child.appendChild(text); parent.appendChild(chi
在js中写入方法,绘制表格 如何使用js在页面中绘制表格 其核心语句就是: var row=document.createElement_x(“tr”); 就是创建行 var cell=document.createElement_x(“td”); 就是创建列 cell.appendChild...
用法 var moduleName = require ( 'draw-to-canvas' ) ; let canvas1 = document . createElement ( 'canvas' ) let canvas2 = document . createElement ( 'canvas' ) // draw from canvas1 to canvas2 ...