`

使用createElement动态创建HTML对象

阅读更多

document.createElement()是在对象中创建一个对象,

要与appendChild() 或 insertBefore()方法联合使用。

其中,

appendChild() 方法在节点的子节点列表末添加新的子节点。

insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

 

 

 

 

下面,我们用实例来讲述一下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()方法插入节点,是可以在子节点列表的任意位置。

 

 

 

 

下面是收集的几个小例子:

 

1.创建链接

 

<script language="javascript">
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

<script language="javascript">
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.创建表单项

<script language="javascript">
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.创建表格

<script language="javascript">
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>

 

分享到:
评论

相关推荐

    createElement动态创建HTML对象脚本代码

    以下我们将详细讲解如何使用`createElement`来创建不同类型的HTML对象。 1. 创建链接(`&lt;a&gt;`标签) 创建链接的基本步骤是首先创建一个`&lt;a&gt;`元素,然后设置其`href`属性指向目标URL,`innerHTML`属性设置链接文本,...

    javascript中createElement的两种创建方式.docx

    var btn = document.createElement("inputtype='button'value='我是动态创建的2'" + "onclick='OnClick2(this)'/"); document.body.appendChild(btn); } function OnClick2(btn) { alert(btn.value); } ``` **...

    动态创建iframe,并动态添加js执行代码

    动态创建iframe意味着在网页加载后,通过JavaScript代码创建并插入到DOM(文档对象模型)中,而不是在HTML源代码中静态定义。 以下是一个简单的动态创建iframe的例子: ```javascript // 创建iframe元素 var ...

    JS动态创建html节点

    ### JS动态创建HTML节点 #### 知识点一:JavaScript操作DOM 在Web开发中,JavaScript经常被用来操作文档对象模型(Document Object Model,简称DOM)。DOM是一种将文档(如HTML文档)转换为树状结构的标准,使得...

    js动态创建Table

    例如,可以使用`document.createElement('table')`创建一个新的表格对象,然后设置其属性如`id`或`class`。 接下来,我们需要创建表格的行`&lt;tr&gt;`和列`&lt;td&gt;`. 使用`createElement()`方法创建这些元素,然后用`...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    javascript中createElement的两种创建方式

    首先,通过 `document.createElement` 方法创建一个 input 元素,然后设置其类型为按钮 (`type="button"`),并赋予相应的值 (`value="我是动态创建的1"`)。为了实现点击按钮时的交互效果,通过 `onclick` 事件属性...

    js动态条目添加

    当提到“js条目添加”时,我们通常是在讨论如何在网页上动态创建和插入新的HTML元素,比如列表项、表格行或者卡片视图。这通常涉及以下几个步骤: 1. **获取DOM元素**:首先,我们需要通过`document.getElementById...

    javascript动态创建链接的方法.docx

    以下将详细解释如何使用JavaScript来动态创建链接,并提供相关的示例代码和扩展知识。 首先,我们需要了解DOM的概念。DOM是HTML和XML文档的一种结构化表示,允许程序和脚本动态更新、添加或删除元素。在JavaScript...

    老裴帮助关于Javascript动态创建表格的小练习

    标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言,它允许开发者在用户与网页...

    动态创建按钮

    在Web前端开发中,我们可以使用JavaScript与HTML DOM(文档对象模型)交互来动态创建按钮。例如,通过`document.createElement('button')`创建一个按钮元素,然后设置其属性,如文本、事件监听器等,最后使用`...

    元素动态创建

    动态创建元素的基本方法包括使用`document.createElement()`函数,此函数允许我们创建新的HTML元素。例如,如果我们想要创建一个新的段落,可以这样做: ```javascript var newPara = document.createElement('p');...

    JS动态创建表格 目标:生成一个2000*5的表格

    在探讨如何使用JavaScript动态创建一个2000行5列的大规模表格时,我们首先要理解JavaScript DOM(Document Object Model)操作的基本概念。DOM是用于HTML和XML文档的标准对象模型和编程接口,允许程序和脚本动态地...

    js 删除动态创建的行

    首先,动态创建HTML表格行通常涉及以下步骤: 1. **获取表格元素**:通过`document.getElementById`或`document.querySelector`等方法找到目标表格元素。 2. **创建新行**:使用`document.createElement('tr')`创建...

    JavaScript动态创建div等元素实例讲解

    本篇文章将详细介绍如何使用JavaScript来动态创建div等元素,并提供具体的代码示例。 #### 二、动态创建div元素 在JavaScript中,可以通过`document.createElement()`方法来创建一个新的DOM节点。接下来,我们可以...

    javascript动态创建及删除元素的方法.docx

    ### JavaScript 动态创建及删除元素的方法 #### 概述 JavaScript 作为一种强大的客户端脚本语言,被广泛应用于网页开发中。它能够实现对页面的动态控制,包括但不限于元素的创建、修改和删除等操作。这些操作主要...

    动态创建html内容时所用的W3C DOM属性和方法

    在动态创建HTML内容时,掌握DOM的属性和方法是至关重要的。以下是对这些关键属性和方法的详细解释: 1. `document.createElement(tagName)`:此方法用于创建指定标签名的新元素。例如,`document.createElement('...

    javascript元素动态创建实现方法

    可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&...

    javaScript 生成DOM 对象(html标签).rar

    在“javaScript生成DOM 对象ProvinceCity3.html”中,可能展示了如何动态生成省份和城市选择的下拉列表,这涉及到遍历数据和动态创建`&lt;option&gt;`元素的过程。 最后,图片处理也是DOM操作的一部分。在“images”目录...

    动态增加html表单(文本框)

    5. **交互与数据提交**:在JavaScript动态创建的表单元素与ASP.NET/C#后端交互时,可能需要额外处理,因为默认情况下,只有在HTML页面加载时存在的表单元素才能在POST请求中发送数据。可以通过设置`runat="server"`...

Global site tag (gtag.js) - Google Analytics