1、dojo.create
1.create a node; 2.set attributes on it; 3.place it in the DOM.
dojo.create(/*String|DOMNode*/ tag, //要创建的节点（“div”、“a”、“script”）或者已存在的节点
/*Object?*/ attrs, //节点属性对象
/*String|DOMNode*?/refNode, //参考节点，默认为doc
/*String?*/pos //放置位置，默认“last”，可取：before,after,replace,only,first,last...
);
http://dojotoolkit.org/reference-guide/1.7/dojo/create.html
http://dojotoolkit.org/reference-guide/1.10/dojo/dom-construct.html
1 <head> 2 <script src="dojo-release-1.5.4-src/dojo/dojo.js"></script> 3 <title></title> 4 </head> 5 <body id="body"> 6 <div id="div1"> 7 <button id="btn"> OK</button> 8 <div>before:1st</div> 9 <div>before:2nd</div> 10 <div id="refNumber" class="ref"> 11 </div> 12 <div>after:lst</div> 13 <div>after:2nd</div> 14 </div> 15 </body> 16 17 <script type="text/javascript"> 18 dojo.ready(function () { 19 dojo.connect(dojo.byId("btn"), "onclick", this, function creatediv() { 20 dojo.create("div", { innerHTML: "<p> I am New DIV</p>" }, "div1"); 21 dojo.create("div", { innerHTML: "<a href="http://www.baidu.com"> bai du yi xia</a>", style: { color: "red", border: "2px solid red" } }, "body", "last"); 22 23 //创建ul 24 var ul = dojo.create("ul", null, "div1", "first"); 25 var items = ["one", "two", "three", "four"]; 26 dojo.forEach(items, function (data) { 27 dojo.create("li", {innerHTML:data},ul); 28 }); 29 }); 30 }); 31 </script> 32 </html>
2、dojo.place
dojo.place(/*String|DOMNode*/ node, //1、如果是“</>”,则会创建一个HTML块；2、否则是一个id或DomNode。
/*String|DOMNode*/refNode, //1、一个id或DomNode。
/*Number|String?*/pos //1、如果是number表示替换refNode的第N（0、1、2...）个子节点。
2、String可以为：before、after、replace、only、first、last，默认为last。
) 3、“only”表示替换参照节点的所有子节点；“replace”会替换参照节点
// 返回值 returns the node it placed。
http://dojotoolkit.org/reference-guide/1.7/dojo/place.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="dojo-release-1.5.4-src/dojo/dojo.js"></script>
<title></title>
</head>
<body id="body">
<div id="div1" style="border:1px solid red ;100px;height: 200px">
<ul id="ul1">
<li id="li1">li1</li>
<li id="li2">li2</li>
<li id="li3">li3</li>
<li id="li4">li4</li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var divs = "<div><p>fdsfds</p><a href="http://www.baidu.com">百度一下</a></div>";
var ret = dojo.place(divs, "div1", "last"); //创建一个html块，并将其插入到id为【div1】的【最后】
dojo.place("li1", "li3", "before"); //把id为【li1】的节点放置在id为【li3】的节点【前面】
dojo.place(dojo.byId("ul1"), "div1", "last"); //把id为【ul1】的节点放置在id为【div1】的节点集【最后】
dojo.place(divs, "div1", "only"); //"only"表示替换所有子节点
}
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"> //before、 after
<head>
<script src="dojo-release-1.5.4-src/dojo/dojo.js"></script>
<title></title>
<style type="text/css">
div.ref
{
background-color:#fcc;
}
div.node
{
background-color:#cfc;
}
div.child
{
background-color:#ffc;
}
div.ref div
{
margin-left:3em;
}
</style>
</head>
<body id="body">
<p>
<button id="palceBA"> 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:lst</div>
<div>after:2nd</div>
</p>
</body>
<script type="text/javascript">
dojo.ready(function () {
var n = 0;
dojo.connect(dojo.byId("palceBA"), "onclick", function () {
dojo.place("<div class='node'>new node#"+(++n)+"</div>","refBA",dojo.byId("posBA").value);
});
});
</script>
</html>
1 <html xmlns="http://www.w3.org/1999/xhtml"> //replace 2 <head> 3 <script src="dojo-release-1.5.4-src/dojo/dojo.js"></script> 4 <title></title> 5 <style type="text/css"> 6 div.ref 7 { 8 background-color:#fcc; 9 } 10 div.node 11 { 12 background-color:#cfc; 13 } 14 div.child 15 { 16 background-color:#ffc; 17 } 18 div.ref div 19 { 20 margin-left:3em; 21 } 22 </style> 23 </head> 24 <body id="body"> 25 <p> 26 <button id="placeReplace"> place node</button> 27 </p> 28 <p> 29 <div>before:1st</div> 30 <div>before:2nd</div> 31 <div id="refBA" class="ref"> 32 <div class="child">the reference node's child #0</div> 33 <div class="child">the reference node's child #1</div> 34 <div class="child">the reference node's child #2</div> 35 </div> 36 <div>after:lst</div> 37 <div>after:2nd</div> 38 </p> 39 </body> 40 41 <script type="text/javascript"> 42 dojo.ready(function () { 43 var n = 0; 44 dojo.connect(dojo.byId("placeReplace"), "onclick", function () { 45 dojo.place("<div class='node'>new node#" + (++n) + "</div>", "refBA", "replace"); 46 dojo.attr("placeReplace","disabled","disabled"); //set 47 }); 48 }); 49 </script> 50 </html>
3、dojo.empty
dojo.empty(/*String|DomNode*/node) //id或DomNode，deletes all children but keeps the node there.
//不返回任何值
4、dojo.destroy
dojo.destroy(/*String|DomNode*/node) //id或DomNode，deletes all children and the node itself.
//不返回任何值
5、dojo.body
dojo.body() //Returns the body element of the document.
相当于：var body = document.getElementsByTagName("body")[0];