- 浏览: 63956 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
77095729:
刚好找到,谢谢 分享
Eclipse中vi插件使用方法 快捷键 -
leongod:
<div class="quote_title ...
面试前准备 -
wangying641588:
楼主在哪里Ctrl+c,Ctrl+v 的这些内容,好古董啊!真 ...
面试前准备 -
leongod:
<div class="quote_title ...
面试前准备 -
leongod:
<div class="quote_title ...
面试前准备
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 1147数据库性能优化普遍采用集群方式,oracle集群软硬件投入 ... -
Tomcat做成系统服务+ 生产服务器性能优化
2016-01-13 10:42 690服务器优化: http://www.oschina.net ... -
如何修改tomcat进程的名称(windows)
2015-12-27 13:47 15091、window平台: 打开tomcat_h ... -
有图有真相。windows环境下配置tomat+redis+nginx集群共享session
2015-11-10 16:50 2304一直想搞一下tomcat集 ... -
提高AJAX客户端响应速度
2013-06-04 23:08 917提高AJAX客户端响应速度 (文:包一磊) AJAX ... -
TOMCAT启动参数配置
2013-06-04 01:03 1076set JAVA_OPTS=-server -Xms1024m ... -
PowerDesigner15 逆向工程不生成physical option及NAME/CODE转换
2013-06-02 07:45 971在使用PowerDesigner15 逆向工程转换PDM后 ... -
改善JAVA程序的151个建议(一)
2012-12-29 13:03 0第一章 通用方法和原则 (P6)KISS原则: keep ... -
spring原理
2011-09-04 22:10 2464什么是Spring,他有什么特 ... -
JNIEnv的哲学
2011-07-25 14:18 1220Java通过JNI 机制调用c/c+ ... -
听新浪微博视频谈高性能站点
2011-07-06 00:15 8181.用redis. http://baike.baidu.c ... -
Eclipse中vi插件使用方法 快捷键
2011-07-02 08:24 3677原创博文, 版权所有!转载请注明出处:http://blog. ... -
commons-dbutils一步学通
2011-06-05 22:57 14141. 介绍 commons-dbutils是Apa ... -
Java日期操作常用方法
2011-05-31 11:39 827代码:/** * 取得指定月份的第一天 * * @param ... -
myeclipse8集成jbpm4方法,绝对可以用
2011-05-31 11:37 950myeclipse8集成jbpm4时,出现更新较慢的情形.请按 ... -
swing界面开发
2011-05-31 11:34 1269最近移植c#开发项目,重写为java版本,对于本地应用部分采用 ... -
JPanel放置到JScrollPane里面并显示滚动条
2011-05-31 11:33 6503一开始,我是知道不能直接在JScrollPane对象里用add ... -
java 不重复随机数生成
2011-05-31 11:31 900public static void main(String[ ...
相关推荐
`document.createElement()` 是JavaScript中的一个核心方法,用于在DOM(Document Object Model)中动态创建新的元素节点。这个方法允许开发者在网页加载后根据需要添加新的HTML元素,为页面增加交互性和动态性。它...
综上所述,通过使用`document.createElement("A")`方法,开发者可以灵活地创建具有各种属性的`<a>`元素,并通过JavaScript控制其行为和样式。在Web开发中,这种技术对于实现页面的动态交互和功能至关重要。 需要...
`document.createElement()` 是JavaScript中的一个核心方法,用于动态创建HTML元素。这个方法在处理动态网页和交互式应用时非常有用,因为它允许我们在页面加载后或用户操作时动态地添加、修改或删除DOM元素。然而,...
//定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document...
1. **创建元素:** 使用`document.createElement("input")`创建一个`<input>`元素。 2. **设置属性:** 通过`btn.type = "button"`设置元素的`type`属性为`button`。 3. **绑定事件:** 通过`btn.onclick`绑定点击...
在IE9及更高版本中,为了更好地遵循W3C标准,微软对某些方法进行了调整,使得`document.createElement`的行为与其他现代浏览器如Firefox和Chrome保持一致。这可能导致在旧的编写方式下出现兼容性问题,尤其是在尝试...
const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt.style.display = 'none'; document.body.appendChild(elt); elt.click(); d
例如,如果需要在表格中动态添加新行,可以使用`insertRow()`方法: ```javascript var newRow = tbody.insertRow(); var newCell = newRow.insertCell(); newCell.textContent = '新数据'; ``` 描述中提到了“单...
在JavaScript中,我们通常会使用`document.createElement`方法来动态创建`iframe`元素。然而,一个常见的问题是在Internet Explorer(IE)浏览器中,通过`document.createElement`创建的`iframe`元素无法设置`name`...
var iframe = document.createElement("iframe"); iframe.name = "dynamicFrame"; iframe.src = "your-source-url.html"; document.body.appendChild(iframe); ``` - **处理跨域问题**:当iframe加载的页面与...
无论是在网页上获取资源,还是从云存储服务中提取数据,我们都需要了解不同的下载方法。本文将详细介绍几种常见的下载文件方式。 1. **直接点击下载** 这是最基本的下载方式,通常在网页上,我们点击一个链接或...
这段代码首先通过`document.createElement("form")`创建了一个新的表单元素,并设置了它的`action`属性为指定的URL(这里是"http://localhost:8080/test/user"),`method`属性为"post",表示我们要使用POST方法来...
在JavaScript的世界里,`document.createElement`是一个非常基础且重要的函数,用于在DOM(Document Object Model)中创建新的HTML元素。然而,随着Web开发的不断进步,开发者们有时会需要更高级、更灵活的功能来...
此外,`document`对象还有许多其他属性和方法,如`document.forms`用于访问表单,`document.images`用于访问图像,以及`document.getElementsByName()`和`getElementsByTagName()`方法用于按名称或标签名查找元素。...
这可以通过调用`document.createElement()`函数实现,如下所示: ```javascript document.createElement('article'); document.createElement('section'); document.createElement('aside'); document....
let downloadLink = document.createElement('a'); downloadLink.href = 'your-pdf-url'; downloadLink.download = 'your-pdf-name.pdf'; document.body.appendChild(downloadLink); // 需要在body内才能触发...
要使用这个组件,你需要首先引入它,然后调用相应的API,具体用法可以参考组件的文档或源码。 总的来说,将SVG转换为图片是一项常见的需求,通过JavaScript的DOM操作和HTML5的特性,我们可以轻松地实现这一功能。`...
这通常涉及到`document.write`、`innerHTML`、`createElement`和`appendChild`等方法。例如,如果我们想在新创建的iframe中注入一段JavaScript代码,可以这样做: ```javascript // 创建script元素 var script = ...