dojo.create\dojo.place\dojo.empty\dojo.destroy\dojo.body

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 ;width: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];

posted @ 2015-07-22 22:22 一切源于简单阅读(741) 评论(0) 收藏举报

刷新页面返回顶部

一切源于简单