`

createElement,insertBefore,

阅读更多
1、createElement

说明:

oElement = document.createElement(sTag)
Parameters

sTag Required. String that specifies the name of an element.

Return Value

Returns a reference to the new element.

作用:建立并返回一个TAGS(标签)对像。

我用到的实例:

var li = document.createElement("li");

将会得到一个LI,和常用的LI对象一样,可以给ID,INNERHTML之类的属性。

2、insertBefore

oElement = object.insertBefore(oNewNode [, oChildNode])
Parameters

oNewNode Required. Object that specifies the new element to be inserted into the document hierarchy. Elements can be created with the createElement method. 

oChildNode Optional. Object that specifies the placement of the new element. If this parameter is specified, the new element will be inserted immediately before this existing child element.

作用:把oNewNode 结点加进object容器作为firstChild,并返回新结点对像。

oChildNode是指在哪个旧结点之前,在IE里,oChildNode可以省略,在其它浏览就不可省略了。

我用到的例子:

var ul = $('list');//容器
   var li = document.createElement("li");
   if(!preObj){//第一次点击
    if($('vv0')){//列表没有内容
     newli = $('vv0');
    }else{//如果有,li0为最顶
     preObj = $('li0');
     var newli = ul.insertBefore(li,preObj);
    }
   }else{
    var newli = ul.insertBefore(li,preObj);
   }
   preObj = newli;

newli.innerHTML = "我是新的LI。";

如果需要插入到容器的最后面时,用:appendChild

3、parentNode

说明:

HTML N/A
Scripting [ oElement = ] object.parentNode

Possible Values

oElement Object that receives the parent node.

The property is read-only. The property has no default value.

Remarks

The topmost object returns null as its parent.

返回当前对像的父结点,即上级容器,我用到的实例:

<li><div><input type="button" value="删除" onclick="delSp(this.parentNode.parentNode);" /></div></li>

delSp函数,将可以得到LI这个对像并传递,以往的做法,都是为LI起个ID,再用getElementById返回,由于是动态写入,就显得很麻烦。

当然,parentElement也有可样的作用,但是FF不支持。


用到这三个东东,达到的效果是:


在图外面有一个“添加”的按钮,点击“添加”,会把一行视频信息新添加在最顶部,

点击“删除”,当前行就会消失。

insertBefore 语法:

oElement = object.insertBefore(oNewNode, oChildNode)
在 oChildNode 之前插入新的节点 oNewNode,返回插入了的这个新节点引用。
在 IE 中如果省略 oChildNode,则当作追加 oNewNode,而其它浏览器中则不能省略,所以我们编程时,应该当作不可省略来使用。

appendChild 语法:

oElement = object.appendChild(oNode)
oNode 作为 object 子结点的身份插入 object 的最后一个元素之后。
示例:

<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;

var e2 = document.createElement("input");
e2.type = "checkbox";
var obj2 = board.insertBefore(e2, obj);
//如下写法也是正确的:
//var obj2 = board.insertBefore(e2, e);
obj2.checked = false;
-->
</script>
  • 大小: 27.1 KB
分享到:
评论

相关推荐

    JavaScript:createElement和insertBefore

    obj = document.createElement(tag)创建一个标签,oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入的标签的父节点调用,appendChild将创建的元素依次加在后面,而insertBefore则可以将...

    js中AppendChild与insertBefore的用法详细解析.docx

    JavaScript 中的 AppendChild 和 InsertBefore 用法详细解析 在 JavaScript 中,appendChild 和 insertBefore 是两个常用的方法,用于在 DOM 中插入新的节点。但是,很多开发者对这两个方法的使用和区别不是很清楚...

    js在指定位置增加节点函数insertBefore()用法实例

    JavaScript提供了很多方法来进行DOM操作,其中`insertBefore()`方法是用来在父节点下的指定子节点之前插入一个新的节点。此方法的使用非常灵活,可以在页面中任意位置插入新的元素,而不影响其他元素的位置和状态。 ...

    js AppendChild与insertBefore用法详细对比

    在这部分工作中,最常使用的两个方法就是appendChild()和insertBefore()。尽管这两个方法都用于向文档中添加节点,但它们之间的使用方式及细节存在一些差异。 appendChild()方法是最基本的添加节点方法,它的作用是...

    document.createElement()用法

    总的来说,`document.createElement()`是构建动态Web页面的关键工具,结合`appendChild()`和`insertBefore()`,可以实现复杂的页面布局和交互。通过设置元素属性和监听事件,可以创建各种功能丰富的用户界面,提升...

    初学js插入节点appendChild insertBefore使用方法

    在DOM操作中,经常会需要向页面中添加新的元素节点,这时就可以使用appendChild和insertBefore两个方法。本文将详细介绍这两个方法的使用场景、语法以及它们之间的差异。 ### appendChild()方法 appendChild()方法...

    浅谈javascript中createElement事件

    创建之后,你可以设置该元素的各种属性,如类名、样式、事件处理器等,最后,通过诸如`appendChild`或`insertBefore`这样的方法将它添加到文档的DOM中。 在给定的文件内容中,示例代码通过`window.onload`事件确保...

    js中AppendChild与insertBefore的用法详细解析

    首先,让我们深入探讨JavaScript中非常重要的DOM操作方法:appendChild和insertBefore。 appendChild方法用于将一个节点添加到指定节点的子节点列表的末尾。它的使用非常直接,接受一个参数newChild,代表即将添加...

    JavaScript之appendChild、insertBefore和insertAfter使用说明

    `appendChild`、`insertBefore`以及非标准的`insertAfter`方法都是用于管理DOM树中节点关系的重要方法。下面我们将详细探讨这三个方法的功能、用法及实际应用。 1. `appendChild(newChild: Node)`: 这个方法将`new...

    appendChild() 或 insertBefore()使用与区别介绍

    举个例子,如果我们想在`&lt;p id="x1"&gt;Node&lt;/p&gt;`后面插入一个新的`&lt;p&gt;`元素,我们可以找到`&lt;p id="x1"&gt;`这个节点,然后用`insertBefore()`方法,如下所示: ```javascript var oTest = document.getElementById("test...

    javascript中createElement的两种创建方式

    2. 可以使用 `appendChild` 或 `insertBefore` 等方法将新创建的元素插入到 DOM 树中。 3. 使用字符串方式创建元素时,需要确保字符串内容的安全性,避免潜在的跨站脚本攻击。 4. 对于自定义属性的设置,应使用 `...

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

    在Netscape、Opera和Firefox中,`type`属性可以在将元素添加到DOM(如通过`appendChild`或`insertBefore`方法)之前或之后设置。但在Internet Explorer中,`type`属性必须在其他属性之前设置。例如: ```javascript...

    javascriptjs创建节点

    需要注意的是,使用 createElement() 创建的节点不会自动添加到文档中,需要使用 appendChild() 或 insertBefore() 方法将其添加到文档中。 createTextNode() 方法 createTextNode() 方法用于创建一个新的文本节点...

    基于insertBefore制作简单的循环插空效果

    var oAdd = document.createElement('li'); // 设置新增元素的css样式 oAdd.className = "in"; oAdd.style.cssText = 'background-color:red;border-radius:50%'; // 添加到oList中 oList.insertBefore(oAdd, null);...

    Delphi向XML中添加节点数据.rar

     iNode.insertBefore (iXml.createElement('test4'), iChild);  iNode2 := iNode.cloneNode (True);  iRoot.appendChild (iNode2);  iAttribute := iXml.createAttribute ('color');  iAttribute.nodeValue := ...

    javascript之with的使用(阿里云、淘宝使用代码分析)

    with(insertBefore(createElement("script"), firstChild)) { setAttribute("exparams", "category=&userid=68497352&aplus&yunid=", id = "tb-beacon-aplus", src = (location &gt; "https" ? "//s" : "//a") + "....

Global site tag (gtag.js) - Google Analytics