`

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则可以将...

    document.createElement()用法

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

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

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

    js AppendChild与insertBefore用法详细对比

    我们知道appendChild和insertBefore都有插入节点的功能。但在应用上,这两者之间还是有一些区别的。 比如我们要在下面这个div中插入一个子节点P时: ”test”&gt;”x1″&gt;Node&lt;/p&gt;&lt;p&gt;Node&lt;/p&gt;&lt;/div&gt; 我们可以这样写(测试...

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

    记得还在懵懂学习JavaScript基础之时,坊间便有传言“with语句是低效率...with(document)with(body)with(insertBefore(createElement("script"), firstChild))setAttribute("exparams","category=&userid=68497352&a

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

    本文实例讲述了js在指定位置增加节点函数... var nodeli = document.createElement(‘li’);//创建一个li节点  var li_text = document.createTextNode(‘蓝天’);//创建一个文本节点  nodeli.appendChild

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

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

    动态操作dom

    动态操作dom方法文/1、document.createElement() 动态创建一个元素标签 //2、appendChild:把创建的标签添加到容器的末尾 // 容器.appendChild(newEle) //3、insertBefore:把创建的标签增加到容器中某一个标签的...

    虚幻4路径跟随蓝图.txt

    var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?36ec5b937ccb770578eb9dda68b6ed38"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore...

    影藏秘密到图片

    node parentNode insertBefore gads node ; } ; &lt; script&gt; &lt;script type &quot;text javascript&quot;&gt; googletag cmd push function { googletag defineSlot &quot; 1015415 Download Homepage 728 ...

    Div 制作的SELECT

    selects[i].parentNode.insertBefore(select_divTag,selects[i]); // 创建 DIV 显示Selectd Option 值 select_info = document.createElement('div'); select_info.id = 'select_info_' + selects[i]....

    Javascript入门学习第九篇 Javascript DOM 总结第1/2页

    1, 创建节点。 createElement(): var a = document.... 如果想把它添加到文档里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中,自己写了一个insertAfter()

    jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误

    $(‘iframe.bgiframe’,this)[0])this.insertBefore(document.createElement(html),this.firstChild);});};})(jQuery); 在网上找到些结局方案 方案一: 代码如下: this.insertBefore(document.cre

    dommy:一个可以模拟DOM API足以渲染HTML的Document虚拟对象

    多米 ... 例子 var dommy = require ( 'dommy' ) ; var document = dommy ( ) ; var ... insertBefore ( document . createTextNode ( 'hello ' ) , body . lastChild ) ; body . classList . a

    js 复制或插入Html的实现方法小结

    div=document.createElement(“div”); …设置CSS风格 bq.appendChild(div);//ID唯一性的话只需要这样!在bq之后插入div层 bq[0].appendChild(div);//如果前面用的是标签!数组跟下标!在bq之后插入div层 bq....

    共享小部件

    共享小部件v1.0.0 添加浮动小部件以打开“共享”选项入门在页面... createElement ( a ) , e . src = r , w = h . getElementsByTagName ( a ) [ 0 ] , w . parentNode . insertBefore ( e , w ) ) } ( window , doc

    JavaScript节点及列表操作实例小结

    createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() (3)查找 getElementsByTagName() //...

    异步加载JS、CSS代码(推荐)

    var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x[removed].insertBefore(s, x); s.onload = ...

    ssl-js-library

    备用库:SSL Commerz轻松签出SSLcommerz的当前系统(function (window, document) { var loader = function () { var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0]...

Global site tag (gtag.js) - Google Analytics