Ako vytvoriť element v Dojo

Manipulácia s objektmi DOM je najčastejšou činnosťou programátorov pri práci s jazykom JavaScript. Okrem štandardných metód, ktoré poskytuje DOM, je často oveľa efektívnejšie používať metódy už existujúcich frameworkov. Medzi základné operácie manipulácie s DOM patrí tvorba elementov a vkladanie ich na správne miesto.

Pre vytvorenie elementu vo frameworku Dojo je možné použiť metódu create(), ktorá je súčasťou modulu dojo/dom-construct.

Príklad: Formát zápisu metódy create().

1
create(element, attributes [, target] [, pos]);
create(element, attributes [, target] [, pos]);

Parameter element je buď názov elementu alebo uzol. Parameter attributes definuje atribúty elementu vo forme objektu. Atribút target definuje umiestnenie vytvoreného elementu. Môže byť id elementu alebo uzol. Posledný parameter pos definuje pozíciu v DOM (first, after, before, last, replace, only). Východiskovou hodnotou je last. Parametre target a pos sú voliteľné.

Príklad: Vytvorenie elementu <div> bez obsahu s definovaním cieľa ako uzla.

1
2
3
4
5
6
7
8
9
10
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
      var target = query("#insert")[0];
      domConstruct.create("div", null, target);
    });
  });
</script>
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
      var target = query("#insert")[0];
      domConstruct.create("div", null, target);
    });
  });
</script>

Príklad: Vytvorenie elementu <div> bez obsahu s definovaním cieľa ako id elementu.

1
2
3
4
5
6
7
8
9
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
      domConstruct.create("div", null, "insert");
    });
  });
</script>
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
      domConstruct.create("div", null, "insert");
    });
  });
</script>

V nasledujúcom príklade je vytvorený element aj s obsahom a atribútmi. Obsah sa definuje ako hodnota vlastnosti innerHTML v parametri attributes.

1
2
3
4
5
6
7
8
9
10
11
<section id="insert"></section>
<script class="code">
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
      var fragment = "<i>HTML Fragment</i>";
      domConstruct.create("div", {innerHTML: fragment, 
      title : "New content", style : "color : blue"}, "insert");
    });
  });
</script>
<section id="insert"></section>
<script class="code">
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
      var fragment = "<i>HTML Fragment</i>";
      domConstruct.create("div", {innerHTML: fragment, 
      title : "New content", style : "color : blue"}, "insert");
    });
  });
</script>

Záver

Pre tvorbu elementov je možné použiť aj ďalšie moduly a metódy. Väčšina z nich pracuje s DOM vlastnosťou innerHTML. Viac informácií o vkladaní fragmentov HTML je uvedených v článku s názvom 5 spôsobov ako v Dojo aplikovať innerHTML.

Ako vytvoriť element v Dojo

Záver

Komentáre

Pridať komentár