`
高级java工程师
  • 浏览: 410460 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

document.createElement()的用法

 
阅读更多
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() 方法在节点的子节点列表任意位置插入新的节点。
分享到:
评论

相关推荐

    document.createElement()用法

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

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

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

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

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

    js 用CreateElement动态创建标签示例

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

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

    1. **创建元素:** 使用`document.createElement("input")`创建一个`&lt;input&gt;`元素。 2. **设置属性:** 通过`btn.type = "button"`设置元素的`type`属性为`button`。 3. **绑定事件:** 通过`btn.onclick`绑定点击...

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

    在IE9及更高版本中,为了更好地遵循W3C标准,微软对某些方法进行了调整,使得`document.createElement`的行为与其他现代浏览器如Firefox和Chrome保持一致。这可能导致在旧的编写方式下出现兼容性问题,尤其是在尝试...

    通过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方法

    例如,如果需要在表格中动态添加新行,可以使用`insertRow()`方法: ```javascript var newRow = tbody.insertRow(); var newCell = newRow.insertCell(); newCell.textContent = '新数据'; ``` 描述中提到了“单...

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

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

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

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

    下载文件的几种方式

    无论是在网页上获取资源,还是从云存储服务中提取数据,我们都需要了解不同的下载方法。本文将详细介绍几种常见的下载文件方式。 1. **直接点击下载** 这是最基本的下载方式,通常在网页上,我们点击一个链接或...

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

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

    docrel更好用的documentcreateElement方法

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

    JS的document_详细介绍及用法

    此外,`document`对象还有许多其他属性和方法,如`document.forms`用于访问表单,`document.images`用于访问图像,以及`document.getElementsByName()`和`getElementsByTagName()`方法用于按名称或标签名查找元素。...

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

    这可以通过调用`document.createElement()`函数实现,如下所示: ```javascript document.createElement('article'); document.createElement('section'); document.createElement('aside'); document....

    JS实现PDF在线预览下载

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

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

    要使用这个组件,你需要首先引入它,然后调用相应的API,具体用法可以参考组件的文档或源码。 总的来说,将SVG转换为图片是一项常见的需求,通过JavaScript的DOM操作和HTML5的特性,我们可以轻松地实现这一功能。`...

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

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

Global site tag (gtag.js) - Google Analytics