大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
首先是引用:
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
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194707.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...