- 浏览: 193975 次
- 性别:
- 来自: QD
文章分类
- 全部博客 (127)
- Struts2 (8)
- Web (27)
- 计算机基础 (2)
- 面试 (2)
- JQuery (4)
- MySQL (1)
- SQL (1)
- AJAX (3)
- Java (17)
- Javascript (36)
- 情感 (0)
- Oracle (7)
- Spring (5)
- FreeMarker (2)
- JSON (1)
- 表达式 (1)
- 线程 (4)
- WebService (10)
- MyEclipse (2)
- LDAP (1)
- Tomcat (1)
- NIO (1)
- Linux (1)
- ExtJS (4)
- Android (1)
- Dojo (2)
- Maven (9)
- Ant (7)
- 分布式 (1)
- Intellij IDEA (1)
最新评论
-
northc:
米饭军 写道如果文件已存在怎样避免应该会覆盖的
用Ant scp往远程linux传文件 -
米饭军:
如果文件已存在怎样避免
用Ant scp往远程linux传文件 -
luis025:
不支持列隐藏 硬伤
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1) -
rgbhje:
楼主大神,我把你的代码简单改了一小下,在4.2可以跑了
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1) -
rgbhje:
楼主大神,我把你的代码简单改了一小下,在4.2可以跑了
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)
document.createElement()是在对象中创建一个对象,
要与appendChild() 或 insertBefore()方法联合使用。
其中,
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。
比如我们要在下面这个div中插入一个子节点P时: 我们可以这样写:
通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。 在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:
效果:这个例子将在x1节点前面插入一个新的节点 又或:
效果:这个例子将在x1节点的下一个节点前面插入一个新的节点 还可为:
这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点 由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。<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>
<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>
<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>
<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>
下面是收集的几个小例子:
1.创建链接
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://www.webjx.com/","网页教学网");
</script>
2.创建DIV
var o = document.body;
//创建DIV
function createDIV(text)
{
var div = document.createElement("div");
div.innerHTML = text;
o.appendChild(div);
}
createDIV("网页教学网:http://www.webjx.com/");
</script>
3.创建表单项
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
var input = document.createElement("input");
input.type = sType;
input.value = sValue;
o.appendChild(input);
}
createInput("button","ooo");
</script>
4.创建表格
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.width = w;
table.height = h;
table.border = 1;
for(var i=1;i<=r;i++)
{
var tr = document.createElement("tr");
for(var j=1;j<=c;j++)
{
var td = document.createElement("td");
td.innerHTML = i + "" + j;
//td.appendChild(document.createTextNode(i + "" + j));
td.style.color = "#FF0000";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
o.appendChild(table);
}
createTable(270,270,9,9);
</script>
发表评论
-
Ext Toolbar换行
2012-06-21 09:02 01.var oneTbar=new Ext.Toolba ... -
禁止select控件選擇
2012-06-20 20:06 0禁止select控件選擇 大家知道, 對於HTML控件 ... -
几种压缩算法原理介绍
2012-05-25 20:04 1363先给出一个JS实现的ZIP:http://stuartk ... -
ExtJS4.0 分享Grid导出Excel插件(3.28更新支持4.1)
2012-03-12 17:00 10893需要将ExtJS Grid 导出 Excel 的同学可以试一试 ... -
Ext Js 4.x 扩展自己的XType
2012-03-03 14:26 1558如果想用自己定制的XType(比如这里想用一个Obj存 ... -
(转)Javascript中大括号“{}”的多义性
2012-02-25 11:21 1011JS中大括号有四种语义作用语义1,组织复合语句,这是最常 ... -
function sleep
2012-02-17 19:16 888//毫秒 (function sleep(t){ ... -
不用递归,循环算0-9999之和(js)
2012-02-17 19:15 895var i=0,sum=eval(new Arra ... -
Augment.js 为旧浏览器增加现代Javascript的功能支持
2012-01-18 12:06 1075index: http://olivernn. ... -
Javascript中的~和~~
2011-12-30 15:58 882<script type="text/j ... -
js中的onchange和onpropertychange
2011-12-28 11:26 1846当一个HTML元素的属 ... -
parentNode、parentElement,childNodes、children
2011-12-26 17:38 932parentNode、parentElement,childN ... -
关于JS中的constructor与prototype
2011-12-22 19:53 1013我们都知道,在JS中有一个function的东西。一般人 ... -
各浏览器对document.getElementById等方法的实现差异
2011-12-21 13:15 933本文来自:http://www.cnblogs.com/sna ... -
全世界最短的IE判定
2011-12-20 15:45 806var ie = !-[1,]; ... -
document.getElementsByClassName的理想实现
2011-12-20 14:41 1441来自: 司徒正美 blog http://www.cnblo ... -
浏览器支持的JS版本及JS对象图
2011-12-20 10:38 1083来自zh.wikipedia.org的JavaScript ... -
JS判断浏览器能力
2011-12-15 20:47 1054对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器 ... -
onunload和onbeforeunload区别
2011-12-15 18:54 974Onunload,onbeforeunload都是在刷 ... -
收藏的两个多tab切换
2011-12-13 19:02 953留着可能以后有用
相关推荐
以下我们将详细讲解如何使用`createElement`来创建不同类型的HTML对象。 1. 创建链接(`<a>`标签) 创建链接的基本步骤是首先创建一个`<a>`元素,然后设置其`href`属性指向目标URL,`innerHTML`属性设置链接文本,...
var btn = document.createElement("inputtype='button'value='我是动态创建的2'" + "onclick='OnClick2(this)'/"); document.body.appendChild(btn); } function OnClick2(btn) { alert(btn.value); } ``` **...
动态创建iframe意味着在网页加载后,通过JavaScript代码创建并插入到DOM(文档对象模型)中,而不是在HTML源代码中静态定义。 以下是一个简单的动态创建iframe的例子: ```javascript // 创建iframe元素 var ...
### JS动态创建HTML节点 #### 知识点一:JavaScript操作DOM 在Web开发中,JavaScript经常被用来操作文档对象模型(Document Object Model,简称DOM)。DOM是一种将文档(如HTML文档)转换为树状结构的标准,使得...
例如,可以使用`document.createElement('table')`创建一个新的表格对象,然后设置其属性如`id`或`class`。 接下来,我们需要创建表格的行`<tr>`和列`<td>`. 使用`createElement()`方法创建这些元素,然后用`...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`<table>`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...
首先,通过 `document.createElement` 方法创建一个 input 元素,然后设置其类型为按钮 (`type="button"`),并赋予相应的值 (`value="我是动态创建的1"`)。为了实现点击按钮时的交互效果,通过 `onclick` 事件属性...
当提到“js条目添加”时,我们通常是在讨论如何在网页上动态创建和插入新的HTML元素,比如列表项、表格行或者卡片视图。这通常涉及以下几个步骤: 1. **获取DOM元素**:首先,我们需要通过`document.getElementById...
以下将详细解释如何使用JavaScript来动态创建链接,并提供相关的示例代码和扩展知识。 首先,我们需要了解DOM的概念。DOM是HTML和XML文档的一种结构化表示,允许程序和脚本动态更新、添加或删除元素。在JavaScript...
标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言,它允许开发者在用户与网页...
在Web前端开发中,我们可以使用JavaScript与HTML DOM(文档对象模型)交互来动态创建按钮。例如,通过`document.createElement('button')`创建一个按钮元素,然后设置其属性,如文本、事件监听器等,最后使用`...
动态创建元素的基本方法包括使用`document.createElement()`函数,此函数允许我们创建新的HTML元素。例如,如果我们想要创建一个新的段落,可以这样做: ```javascript var newPara = document.createElement('p');...
在探讨如何使用JavaScript动态创建一个2000行5列的大规模表格时,我们首先要理解JavaScript DOM(Document Object Model)操作的基本概念。DOM是用于HTML和XML文档的标准对象模型和编程接口,允许程序和脚本动态地...
首先,动态创建HTML表格行通常涉及以下步骤: 1. **获取表格元素**:通过`document.getElementById`或`document.querySelector`等方法找到目标表格元素。 2. **创建新行**:使用`document.createElement('tr')`创建...
本篇文章将详细介绍如何使用JavaScript来动态创建div等元素,并提供具体的代码示例。 #### 二、动态创建div元素 在JavaScript中,可以通过`document.createElement()`方法来创建一个新的DOM节点。接下来,我们可以...
### JavaScript 动态创建及删除元素的方法 #### 概述 JavaScript 作为一种强大的客户端脚本语言,被广泛应用于网页开发中。它能够实现对页面的动态控制,包括但不限于元素的创建、修改和删除等操作。这些操作主要...
在动态创建HTML内容时,掌握DOM的属性和方法是至关重要的。以下是对这些关键属性和方法的详细解释: 1. `document.createElement(tagName)`:此方法用于创建指定标签名的新元素。例如,`document.createElement('...
可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head&...
在“javaScript生成DOM 对象ProvinceCity3.html”中,可能展示了如何动态生成省份和城市选择的下拉列表,这涉及到遍历数据和动态创建`<option>`元素的过程。 最后,图片处理也是DOM操作的一部分。在“images”目录...
5. **交互与数据提交**:在JavaScript动态创建的表单元素与ASP.NET/C#后端交互时,可能需要额外处理,因为默认情况下,只有在HTML页面加载时存在的表单元素才能在POST请求中发送数据。可以通过设置`runat="server"`...