3-dojo/dom-construct() 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="dojoTools/dojo/dojo.js.uncompressed.js" data-dojo-config="asyn:true"></script>

</head>
<body>
    <h1 id="greeting">Hello Dojo!</h1>
    <input type="button" id="btnCreate" value="创建项" />

    <button id="btnC2">domContruct.Create()方法</button>
    <button id="btnEmpty">domContruct.Empay()方法</button>
    <button id="btnDestory">domContruct.Destory()方法</button>
    <ul id="ulTest">
    </ul>
    <script>
        require(["dojo/dom",
            "dojo/dom-construct",
            "dojo/on",
            "dojo/domReady!"
        ], function (dom, domConstruct, on) {
            var greetingNode = dom.byId('greeting');
            //var ul = document.getelementById("ulTest");
            domConstruct.place('<em>Dojo!</em>', greetingNode);
            //domConstruct.toDom():实例化一个HTML片段,返回他的dom节点
            var node = domConstruct.toDom("<div>Im a Node</div>");
            //动态创建dom元素添加到指定节点中
            var count = 0;

            on(dom.byId("btnCreate"), "click", function () {
                count++;
                //var li = domconstruct.todom("<li>这是一个新增的li节点!!!!"+count+"</li>");
                //domconstruct.place(li, "ultest",1);
                var li = domConstruct.toDom("<li>新增节点" + count + "</li>");
                //  //动态添加节点.
                // Can be a number or one of the following strings: “before”, “after”, “replace”, “only”, “first”, or “last”. If omitted, “last” is assumed. 
                //
                //domConstruct.place(li, "ulTest", "last");
                //新增节点1
                // 新增节点2
                // 新增节点3

                //domConstruct.place(li, dom.byId("ulTest"), "only");//只有一个
                //domConstruct.place("<div><p>assumed:假定的</p></div>","btnCreate","after");//只有一个
                
                //当第三个参数为数字时,表在插入的位置.0开始.当大于最大索引,默认最后插入,小于0在第一个插入
                domConstruct.place("<div><h1>optional:可选的,随意的"+count+"</h1></div>", "ulTest", 5);
            });


            on(dom.byId("btnC2"), "click", function () {
                //参数详细说明:
                //1.需要添加的节点元素:可以是一个tag,也可以是已经存在的dom节点to process
                //2.需要添加的节点的样式,可以为null,
                //3.参考元素,
                //4.相对参考元素的位置. “first”,”after”,”before”,”last”, “replace” or “only”
                domConstruct.create("div", { innerHTML: "<h3>utility:实用的,通用的</h3>" }, "greeting", "first");
                dom

            });

            //Safely empty the contents of a DOM element. empty() deletes all children but keeps the node there
            on(dom.byId("btnEmpty"), "click", function () {
                domConstruct.empty("ulTest");
            });
            //Destroys a DOM element. destroy() deletes all children and the node itself.
            on(dom.byId("btnDestory"), "click", function () {
                domConstruct.destroy("ulTest");
            });
        });
    </script>
</body>
</html>

　　

posted on 2016-12-13 10:09  努力的活着_在人间  阅读(309)  评论(0)    收藏  举报

导航