dojo英文_dojo教程
dojo英文_dojo教程
全栈程序员站长
发布于 2022-10-01 15:32:55
发布于 2022-10-01 15:32:55
代码可运行
运行总次数：0
代码可运行
首先是引用：
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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/194707.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年9月12日 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
