document.createElement()是在对象中创建一个对象,要与appendChild()或insertBefore()方法联合使用。其中,appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。
用法:<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>
例2:
<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.option[0] = new Option("加载项1","");
e2.option[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(e4);
</script>
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最后一个节点。很明显,通过这个例子,可以知道appendChild和insertBefore都可以进行插入节点的操作。
oTest.insertBefore(newNode,null),这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二是他独有的。他不仅可以是null,还可以为:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElement("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "this is a test";
oTest.insertBefore(newNode,refChild);
</script>
效果:这个例子将在xl节点前面插入一个新的节点。
又或:
<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>
效果:这个例子将在xl节点的下一个节点前面插入一个新的节点。
还可为:
<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>
这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNode[0,1,...]来在其他位置插入新的节点
由此可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例1中使用insertBefore()方法也可以在子节点列表末插入新节点的。结合两种情况,insertBefore()方法插入节点,可以在子节点列表的任意位置。
从这几个例子中得出:
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
分享到:
相关推荐
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 代码如下: var inputObj = ...
//定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document...
用法: html2canvas(document.body, { allowTaint: true, taintTest: false, ... var newImg = document.createElement("img"); newImg.src = dataUrl; document.body.appendChild(newImg); } });
当我们需要动态生成DOM对象的时候,会使用createElement的方法创建。但是在IE和Firefox下,createElement方法是有差异的。 在 IE 中,可以使用以下两种方式来创建一个元素: 1、document.createElement(‘table’) 2...
用法 html和svg函数将字符串模板具体化为DOM。 如果字符串模板具有多个顶级节点,则函数将返回DocumentFragment 。 // Create a DIV element. const div = html ` < div> </ div> ` ; // similar to html`<div>` /...
JSX-IR的DOM渲染器安装npm install jsx-to-dom 用法转堆babel . transform ( code , { plugins : [ 'jsx-to-dom/babel-plugin' ] , blacklist : [ 'react' ]} ) ; 或描述的任何其他方式,只需将“'jsx-to-dom / ...
主要介绍了JS document对象简单用法,结合完整实例形式详细分析了JS document对象获取、输出、节点调用等相关操作技巧,需要的朋友可以参考下
使用方法:请把文件放置到 【你的项目位置】/content 目录下 var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = ...
document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...
利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下:var oNewP = $(“使用jQuery创建的...
利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素 代码如下: var oNewP = $(“使用jQuery创建的...
首先创建一个iframe对象,使用document.createElement方法创建 var iframe = document.createElement("iframe"); document.body.appendChild(iframe) 然后,获取到iframe里面的window对象 var iframeWin = if
createDocumentFragment 如果要在一个节点上一次性插入多个元素...var child = document.createElement(`'div'`); var text = document.createTextNode(`'' + i);` child.appendChild(text); parent.appendChild(chi
在js中写入方法,绘制表格 如何使用js在页面中绘制表格 其核心语句就是: var row=document.createElement_x(“tr”); 就是创建行 var cell=document.createElement_x(“td”); 就是创建列 cell.appendChild...
用法 var moduleName = require ( 'draw-to-canvas' ) ; let canvas1 = document . createElement ( 'canvas' ) let canvas2 = document . createElement ( 'canvas' ) // draw from canvas1 to canvas2 ...
document.createElement(‘video’).canPlayType) { var vidTest = document.createElement(“video”); oggTest = vidTest.canPlayType(‘video/ogg; codecs=”theora, vorbis”‘); if (!oggTest) { h264Test ...