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
<head>
<script src="dojo-release-1.5.4-src/dojo/dojo.js"></script>
<title></title>
</head>
<body id="body">
<div id="div1">
<button id="btn"> OK</button>
<div>before:1st</div>
<div>before:2nd</div>
<div id="refNumber" class="ref">
</div>
<div>after:lst</div>
<div>after:2nd</div>
</div>
</body> <script type="text/javascript">
dojo.ready(function () {
dojo.connect(dojo.byId("btn"), "onclick", this, function creatediv() {
dojo.create("div", { innerHTML: "<p> I am New DIV</p>" }, "div1");
dojo.create("div", { innerHTML: "<a href=\"http://www.baidu.com\"> bai du yi xia</a>", style: { color: "red", border: "2px solid red" } }, "body", "last"); //创建ul
var ul = dojo.create("ul", null, "div1", "first");
var items = ["one", "two", "three", "four"];
dojo.forEach(items, function (data) {
dojo.create("li", {innerHTML:data},ul);
});
});
});
</script>
</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>
<html xmlns="http://www.w3.org/1999/xhtml"> //replace
<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="placeReplace"> place node</button>
</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("placeReplace"), "onclick", function () {
dojo.place("<div class='node'>new node#" + (++n) + "</div>", "refBA", "replace");
dojo.attr("placeReplace","disabled","disabled"); //set
});
});
</script>
</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];
dojo.create\dojo.place\dojo.empty\dojo.destroy\dojo.body的更多相关文章
- create a large size empty file to measure transfer speed
OS : Windows open cmd fsutil file createnew file_name 1073741824 // 1GB fsutil file createnew file_n ...
- DOJO DOM 功能
In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...
- 现代DOJO（翻译）
http://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/index.html 你可能已经不用doio一段时间了,或者你一直想保持 ...
- Dojo框架学习笔记<二>
一.dojo/dom 该模块定义了Dojo Dom API,主要有以下几种用法: 1.dom.byId();(相当于document.getElementById()) ①最直接的用 ...
- 找出并解决 JavaScript 和 Dojo 引起的浏览器内存泄露问题
简介: 如果大量使用 JavaScript 和 Ajax 技术开发 Web 2.0 应用程序,您很有可能会遇到浏览器的内存泄漏问题.如果您有一个单页应用程序或者一个页面要处理很多 UI 操作,问题可能 ...
- 开始 Dojo 开发
原文出处:Joe Lennon 从头开始学习 Dojo,第 1 部分 开始 Dojo 开发 Dojo Toolkit 简介 Dojo 于 2004 年创建,使开发 DHTML 和 JavaScript ...
- Dojo - 操作Dom的函数
DOM Manipulation You might be seeing a trend here if you have gotten this far in the tutorial, in th ...
- Dojo入门：DOM操作
作为一款功能齐全的js工具包,dojo提供了统一的DOM操作方法. dojo.byId dojo.byId 函数使您可以通过 id 属性选择一个 DOM 节点.该函数是标准 document.ge ...
- dojo框架笔记
一.模块定义 1.定义只含值对,没有任何依赖的模块(moudle1.js) define({ color: "black", size: "unisize" } ...
随机推荐
- 图片轮播插件 Slides-SlidesJS-3
图片轮播插件 Slides-SlidesJS-3 demo document 地址: http://slidesjs.com/
- vs2013 创建网站
从文件菜单中选择新建网站,版本选择4,如果选择更高级的版本在发布的时候老是会报错,暂时找不到解决的方法,所以就选择4这个版本了.选择asp的空网站,在下面选择文件系统. 项目建好后如下,然后添加一个w ...
- Oracle自治事务
定 义: Autonomous transactions are independent transactions that can be called from within anot ...
- [转载]一个小例子介绍Obj-C的函数命名方式
原文链接:http://www.cnblogs.com/liufan9/archive/2013/04/02/2995626.html 对于以前做C#或者JAVA开发的朋友而言,初次接触iOS开发,O ...
- （原）ubuntu16中安装moses
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5653186.html 在ubuntu14中,可以使用下面的语句安装moses: luarocks in ...
- （译+原）std::shared_ptr及std::unique_ptr使用数组
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462363.html 参考网址: http://stackoverflow.com/questions ...
- python一句代码建立树
from collections import defaultdict def tree(): return defaultdict(tree) 上面的代码不难理解,就是利用递归的方式,创建了一个树的 ...
- HDU 4939 Stupid Tower Defense
dp:枚举red,dp前i 个塔中有j 个蓝塔的最大伤害. 机智的地方:dp前i 个塔的时候可以同时处理n-i 个红塔,这样就少了个循环...(枚举红塔的循环) #include <iostre ...
- 实现TCP断点上传，后台C#服务实现接收
实现TCP断点上传,后台C#服务实现接收 终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现, ...
- information_schema.engines学习
当前mysql实例的存储引擎信息可以从information_schema.engines 中查询到 例子: mysql> select * from information_schema.en ...