5 spôsobov ako v Dojo aplikovať innerHTML

Práca s frameworkom Dojo je mierne odlišná od knižnice jQuery. Ale aj Dojo podobne ako jQuery ponúka viacero spôsobov ako rýchlo pracovať s DOM. Príkladom je vkladanie fragmentov prostredníctvom vlastnosti innerHTML, ktoré je možné vykonať viacerými spôsobmi.

Prvý spôsob aplikovania vlastnosti innerHTML je prostredníctvom metódy create(). V tomto prípade je vytvorený wrapper a do neho vložený fragment HTML.

1
2
3
4
5
6
7
8
9
10
11
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/dom-construct", "dojo/query"],
    function(ready, domConstruct, query) {
      ready(function() {
        var target = query("#insert")[0];
        var fragment = "<b>HTML Fragment</b>";
        domConstruct.create("div", {innerHTML: fragment}, 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];
        var fragment = "<b>HTML Fragment</b>";
        domConstruct.create("div", {innerHTML: fragment}, target);
      });
    });
</script>

Druhý spôsob je vloženie fragmentu HTML prostredníctvom metódy set() z modulu dojo/dom-attr.

1
2
3
4
5
6
7
8
9
10
11
<section id="insert"></section>
<script>
  require(defaultDojoConfig, ["dojo/ready", "dojo/dom-attr", "dojo/query"],
    function(ready, attr, query) {
      ready(function() {
        var fragment = "<b>HTML Fragment</b>";
        var node = query("#insert")[0];
        attr.set(node, {innerHTML : fragment});
      });
    });
</script>
<section id="insert"></section>
<script>
  require(defaultDojoConfig, ["dojo/ready", "dojo/dom-attr", "dojo/query"],
    function(ready, attr, query) {
      ready(function() {
        var fragment = "<b>HTML Fragment</b>";
        var node = query("#insert")[0];
        attr.set(node, {innerHTML : fragment});
      });
    });
</script>

Tretí spôsob je použitie metódy innerHTML(). Pozor, metódu nie je možné aplikovať, ak funkcia query() bude obsahovať zápis poľa (query("#insert")[0]). Podmienkou aplikovania metódy innerHTML() je tiež nahratie modulu dojo/NodeList-manipulate.

1
2
3
4
5
6
7
8
9
10
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/query", "dojo/NodeList-manipulate"],     
    function(ready, query) {
      ready(function() {
        var fragment = "<b>HTML Fragment</b>";
        query("#insert").innerHTML(fragment);
      });
    });
</script>
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/query", "dojo/NodeList-manipulate"],     
    function(ready, query) {
      ready(function() {
        var fragment = "<b>HTML Fragment</b>";
        query("#insert").innerHTML(fragment);
      });
    });
</script>

Štvrtý spôsob pre vloženie fragmentu HTML je použitie vlastnosti innerHTML.

1
2
3
4
5
6
7
8
9
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/query"], function(ready, query) {
    ready(function() {
      var fragment = "<b>HTML Fragment</b>";
      query("#insert")[0].innerHTML = fragment;
    });
  });
</script>
<section id="insert"></section>
<script>
  require(["dojo/ready", "dojo/query"], function(ready, query) {
    ready(function() {
      var fragment = "<b>HTML Fragment</b>";
      query("#insert")[0].innerHTML = fragment;
    });
  });
</script>

Posledným predstaveným spôsobom vloženia fragmentu HTML je použitie metódy place(). Túto metódu sa odporúča používať namiesto metódy create(), ktorá vytvára aj wrapper.

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

Záver

Predstavené spôsoby vkladanie fragmentu HTML nie sú jedinou možnosťou frameworku Dojo. V prípade, že poznáte ďalšie zaujímavé spôsoby ako vložiť fragment HTML prostredníctvom Dojo do stromu dokumentu, budem rád ak sa o ne podeliť prostredníctvom komentára.

5 spôsobov ako v Dojo aplikovať innerHTML

Záver

Komentáre

Pridať komentár