`

js document.createElement()的用法 (转)

阅读更多
document.createElement()的用法
分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验。


document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。


下面,举例说明document.createElement()的用法。<div id="board"></div>

例1: 
 
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
  
效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。

例2:
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);

效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。

      

例3:
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);

效果:在标签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>


我们可以这样写:
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);


   通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

   在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:
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);

效果:这个例子将在x1节点前面插入一个新的节点


又或:
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);

效果:这个例子将在x1节点的下一个节点前面插入一个新的节点


还可为:
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]); 


  这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

从这几个例子中得出:

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

  insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
分享到:
评论

相关推荐

    document.createElement()用法

    `document.createElement()` 是JavaScript中的一个核心方法,用于在DOM(Document Object Model)中动态创建新的元素节点。这个方法允许开发者在网页加载后根据需要添加新的HTML元素,为页面增加交互性和动态性。它...

    document.createElement(&quot;A&quot;)比较不错的属性

    综上所述,通过使用`document.createElement("A")`方法,开发者可以灵活地创建具有各种属性的`&lt;a&gt;`元素,并通过JavaScript控制其行为和样式。在Web开发中,这种技术对于实现页面的动态交互和功能至关重要。 需要...

    js 用CreateElement动态创建标签示例

    //定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document...

    document.createElement()用法及注意事项(ff下不兼容)

    `document.createElement()` 是JavaScript中的一个核心方法,用于动态创建HTML元素。这个方法在处理动态网页和交互式应用时非常有用,因为它允许我们在页面加载后或用户操作时动态地添加、修改或删除DOM元素。然而,...

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

    JavaScript提供了多种方法来创建和操作DOM元素,其中`createElement`是最基础且强大的API之一。本文将详细介绍JavaScript中利用`createElement`创建DOM元素的两种常见方式,并探讨它们之间的区别与应用场景。 #### ...

    IE9+已经不对document.createElement向下兼容的解决方法

    在JavaScript中,`document.createElement` 是一个用于动态创建HTML元素的方法。然而,不同的浏览器对它的实现可能存在差异。在IE9及更高版本中,为了更好地遵循W3C标准,微软对某些方法进行了调整,使得`document....

    通过JavaScript下载文件到本地的方法(单文件)

    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

    js展现table方法

    此外,文件名“简单纯js实现网页tab选项卡切换效果”提示我们可以讨论如何使用JavaScript实现选项卡切换。选项卡界面是用户体验中的常见设计模式,可以使用事件监听和DOM操作实现。下面是一个简单的实现: ```...

    document.frames在非IE浏览器中的解决办法

    var iframe = document.createElement("iframe"); iframe.name = "dynamicFrame"; iframe.src = "your-source-url.html"; document.body.appendChild(iframe); ``` - **处理跨域问题**:当iframe加载的页面与...

    IE中document.createElement的iframe无法设置属性name的解决方法

    在JavaScript中,我们通常会使用`document.createElement`方法来动态创建`iframe`元素。然而,一个常见的问题是在Internet Explorer(IE)浏览器中,通过`document.createElement`创建的`iframe`元素无法设置`name`...

    javascript将svg转图片代码组件,亲测有效;

    这可以通过JavaScript的`innerHTML`属性或`document.querySelector()`方法来实现。例如,如果你有一个ID为`mySVG`的SVG元素,可以这样获取其内容: ```javascript const svgElement = document.getElementById('...

    js动态生成form 并用ajax方式提交的实现方法

    这段代码首先通过`document.createElement("form")`创建了一个新的表单元素,并设置了它的`action`属性为指定的URL(这里是"http://localhost:8080/test/user"),`method`属性为"post",表示我们要使用POST方法来...

    javascript document 对象的用法大全

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在Web开发中,`document`对象是浏览器提供的一种能够操作HTML文档的方式。...掌握这些API的使用方法对于提高Web开发效率具有重要意义。

    JS实现PDF在线预览下载

    let downloadLink = document.createElement('a'); downloadLink.href = 'your-pdf-url'; downloadLink.download = 'your-pdf-name.pdf'; document.body.appendChild(downloadLink); // 需要在body内才能触发...

    JS的document_详细介绍及用法

    JavaScript中的`document`对象是浏览器提供的一个全局对象,它代表了当前HTML页面的文档对象,提供了访问和操作页面内容的方法和属性。通过`document`,我们可以实现对HTML元素的查找、创建、修改以及与用户交互等...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 ...以上就是关于`document`对象的详细介绍及其相关属性、方法和事件的使用示例。通过熟练掌握这些内容,开发者可以更加灵活地操作Web页面,实现丰富的交互效果。

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

    这通常涉及到`document.write`、`innerHTML`、`createElement`和`appendChild`等方法。例如,如果我们想在新创建的iframe中注入一段JavaScript代码,可以这样做: ```javascript // 创建script元素 var script = ...

    docrel更好用的documentcreateElement方法

    在JavaScript的世界里,`document.createElement`是一个非常基础且重要的函数,用于在DOM(Document Object Model)中创建新的HTML元素。然而,随着Web开发的不断进步,开发者们有时会需要更高级、更灵活的功能来...

    让更多浏览器支持html5元素的简单方法.docx

    为了使IE能正确处理这些元素,我们需要在页面头部使用JavaScript来创建这些元素。这可以通过调用`document.createElement()`函数实现,如下所示: ```javascript document.createElement('article'); document....

Global site tag (gtag.js) - Google Analytics