dojo中的dojo/dom-construct

首先是引用：

require(["dojo/dom-construct"], function(domConstruct){});

dom-construct主要包含如下方法：

1.toDom()

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){on(dom.byId("button1"), "click", function(){var row = domConstruct.toDom("<tr><td>bar</td><td>Bar is also good</td></tr>");domConstruct.place(row, "example");});
});

Here is our HTML <table> which we will add the row to.

<button id="button1" type="button">Add a row</button>
<table><thead><tr><th>Example</th><th>Description</th></tr></thead><tbody id="example"><tr><td>foo</td><td>Foo is good</td></tr></tbody>
</table>

2.place()

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){var n = 0;on(dom.byId("placeBA"), "click", function(){domConstruct.place("<div class='node'>new node #" + (++n) + "</div>", "refBA",dom.byId("posBA").value); // before/after});
});

<p><button id="placeBA">Place node</button><select id="posBA"><option value="before">before</option><option value="after">after</option></select>
</p>
<p><div>before: 1st</div><div>before: 2nd</div><div id="refBA" class="ref"><div class="child">the reference node's child #0</div><div class="child">the reference node's child #1</div><div class="child">the reference node's child #2</div></div><div>after: 1st</div><div>after: 2nd</div>
</p>

div.ref     { background-color: #fcc; }
div.node    { background-color: #cfc; }
div.child   { background-color: #ffc; }
div.ref div { margin-left: 3em; }

3.create()

Append a new <div> to<body> with no attributes:

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){var n = domConstruct.create("div", null, win.body());
});

Place a new <div> as the first child of<body> with no attributes:

require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win){var n = domConstruct.create("div", null, win.body(), "first");
});

4.empty()

require(["dojo/dom-construct"], function(domConstruct){// Empty node's children byId:domConstruct.empty("someId");
});

5destory()

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){on(dom.byId("progButtonNode"), "click", function(){domConstruct.destroy("testnode1");dom.byId("result1").innerHTML = "TestNode1 has been destroyed.";});
});

Some DomNodes

<div id="testnode1">TestNode 1</div>
<button id="progButtonNode" type="button">Destroy TestNode1</button>
<div id="result1"></div>

具体应用看官网例子：http://dojotoolkit.org/reference-guide/1.10/dojo/dom-construct.html

dojo中的dojo/dom-construct相关推荐

dojo中的dojo/on
在元素上绑定events,需要引用包dojo/on,通过on方法来实现. <button id="myButton">Click me!</button> ...
dojo中的dojo/dom-style
作用:DOM节点获取或设置样式. 用法: // Dojo 1.7+ (AMD) require(["dojo/dom-style"], function(domStyle){dom ...
dojo中的dojo/dom-attr
方法的函数签名为: require(["dojo/dom-attr"], function(domAttr){result = domAttr.set("myNode&q ...
dojo中的dojo/dom-class
使用: require(["dojo/dom-class"], function(domClass){}); 包含的方法: 1.contains() 2.add() 3.remov ...
Arcgis javascript那些事儿（二十）——dojo中djconfig配置、dojo与requirejs项目冲突
一.引言由于项目一部分使用requirejs另一部分地图是用dojo开发(因为arcgis javascript使用的dojo),两个要和到一起,所以要求研究下如何把两者和到一起,花了两天时间看了看 ...
Dojo 1.6 官方教程：Dojo中的事件
原题:Events with Dojo 原文链接: http://dojotoolkit.org/documentation/tutorials/1.6/events/ 作者: Bran Forbes ...
dojo dojo中的事件处理
JS为DOM添加事件在原生的环境下,为DOM添加事件处理函数有多种方法: <input type="button" name="btn" value=& ...
ArcGIS中加载模块时dojo/domReady!和dojo/ready的区别
我们在使用ArcGIS Javascript API开发时,最开始要先加载模块: <script>require(["esri/map", "dojo/do ...
庆祝Dojo中文博客成为CSDN博客专家！
去年此时,我们正式开设了Dojo中文博客.目标很明确,就是能够让有需要的人在搜索Dojo中文资料时能看到最新最专业的技术文章. 一年来,我们持续的关注Dojo社区的最新进展,或者将最新的教程翻译成中文 ...

dojo中的dojo/dom-construct

dojo中的dojo/dom-construct相关推荐

最新文章

热门文章