dojo中的dojo/dom-construct
生活随笔
收集整理的這篇文章主要介紹了
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中的AMD模式开发案例
- 下一篇： dojo中的dojo/dom-class