Insérer du HTML dans un div

J'essaye d'insérer un morceau de HTML dans un div. Je veux voir si la méthode JavaScript simple est plus rapide que l'utilisation de jQuery. Malheureusement, j'ai oublié comment le faire à l'ancienne. : P

var test2 = function(){
    var cb = function(html){
        var t1 = document.getElementById("test2");
        var d = document.createElement("div");
        d.id ="oiio";
        d.innerHtml = html;
        t1.appendChild(d);
        console.timeEnd("load data with javascript");
    };
    console.time("load data with javascript");
    $.get("test1.html", cb);
}

qu'est-ce que je fais de mal ici les gars?

edit :
Quelqu'un a demandé quel est le plus rapide, jquery ou js ordinaire, alors j'ai écrit un test:
http://jsperf.com/html-insertion-js-vs-jquery

plain js est 10% plus rapide

Je pense que c'est ce que tu veux:

document.getElementById('tag-id').innerHTML = '<ol><li>html data</li></ol>';

Gardez à l'esprit que innerHTML n'est pas accessible pour tous les types de balises lors de l'utilisation d'IE. (éléments de table par exemple)

L'utilisation de JQuery permettrait de remédier à cette incohérence du navigateur. Avec la bibliothèque jquery incluse dans votre projet, écrivez simplement:

$('#yourDivName').html('yourtHTML');

Vous pouvez également envisager d'utiliser:

$('#yourDivName').append('yourtHTML');

Cela ajoutera votre galerie en tant que dernier élément du div sélectionné. Ou:

$('#yourDivName').prepend('yourtHTML');

Cela l'ajoutera comme premier élément dans le div sélectionné.

Consultez la documentation JQuery pour ces fonctions:

• http://api.jquery.com/append/
• http://api.jquery.com/prepend/

J'utilise "+" (plus) pour insérer div en html:

document.getElementById('idParent').innerHTML += '<div id="idChild"> content html </div>';

J'espère que cette aide.

Comme alternative, vous pouvez utiliser insertAdjacentHTML - mais je creuse et fais des tests de performances - (2019.09.13 vendredi) MacOs High Sierra 10.13.6 sur Chrome 76.0.3809 (64 bits), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64 bits)). Le test F est uniquement pour référence - il est hors de portée de la question car nous devons insérer dynamiquement du HTML - mais en F je le fais à la main (de manière statique) - théoriquement (pour autant que je sache) cela devrait être le moyen le plus rapide d'insérer de nouveaux éléments html.

RÉSUMÉ

• Le A innerHTML = (ne pas confondre avec +=) est le plus rapide (Safari 48k opérations par seconde, Firefox 43k op / s, Chrome 23k op / s) Le A est ~ 31% plus lent que la solution idéale F uniquement chrome mais sur safari et firefox est plus rapide ( !)
• Le B innerHTML +=... est le plus lent sur tous les navigateurs (Chrome 95 op / sec, Firefox 88 op / sec, Sfari 84 op / sec)
• Le D jQuery est le deuxième lent sur tous les navigateurs (Safari 14 op / sec, Firefox 11k op / sec, Chrome 7k op / sec)
• La solution de référence F (théoriquement la plus rapide) n'est pas la plus rapide sur firefox et safari (!!!) - ce qui est surprenant
• Le navigateur le plus rapide était Safari

Plus d'informations sur pourquoi innerHTML =est beaucoup plus rapide queinnerHTML += est ici . Vous pouvez effectuer un test sur votre machine / navigateur ICI

let html = "<div class='box'>Hello <span class='msg'>World</span> !!!</div>"

function A() {    
  container.innerHTML = `<div id="A_oiio">A: ${html}</div>`;
}

function B() {    
  container.innerHTML += `<div id="B_oiio">B: ${html}</div>`;
}

function C() {    
  container.insertAdjacentHTML('beforeend', `<div id="C_oiio">C: ${html}</div>`);
}

function D() {    
  $('#container').append(`<div id="D_oiio">D: ${html}</div>`);
}

function E() {
  let d = document.createElement("div");
  d.innerHTML = `E: ${html}`;
  d.id = 'E_oiio';
  container.appendChild(d);
}

function F() {    
  let dm = document.createElement("div");
  dm.id = "F_oiio";
  dm.appendChild(document.createTextNode("F: "));

  let d = document.createElement("div");
  d.classList.add('box');
  d.appendChild(document.createTextNode("Hello "));
  
  let s = document.createElement("span");
  s.classList.add('msg');
  s.appendChild(document.createTextNode("World"));

  d.appendChild(s);
  d.appendChild(document.createTextNode(" !!!"));
  dm.appendChild( d );
  
  container.appendChild(dm);
}


A();
B();
C();
D();
E();
F();

.warr { color: red } .msg { color: blue } .box {display: inline}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="warr">This snippet only for show code used in test (in jsperf.com) - it not perform test itself. </div>
<div id="container"></div>

Et de nombreuses lignes peuvent ressembler à ceci. Le html ici est un exemple seulement.

var div = document.createElement("div");

div.innerHTML =
    '<div class="slideshow-container">\n' +
    '<div class="mySlides fade">\n' +
    '<div class="numbertext">1 / 3</div>\n' +
    '<img src="image1.jpg" style="width:100%">\n' +
    '<div class="text">Caption Text</div>\n' +
    '</div>\n' +

    '<div class="mySlides fade">\n' +
    '<div class="numbertext">2 / 3</div>\n' +
    '<img src="image2.jpg" style="width:100%">\n' +
    '<div class="text">Caption Two</div>\n' +
    '</div>\n' +

    '<div class="mySlides fade">\n' +
    '<div class="numbertext">3 / 3</div>\n' +
    '<img src="image3.jpg" style="width:100%">\n' +
    '<div class="text">Caption Three</div>\n' +
    '</div>\n' +

    '<a class="prev" onclick="plusSlides(-1)">&#10094;</a>\n' +
    '<a class="next" onclick="plusSlides(1)">&#10095;</a>\n' +
    '</div>\n' +
    '<br>\n' +

    '<div style="text-align:center">\n' +
    '<span class="dot" onclick="currentSlide(1)"></span> \n' +
    '<span class="dot" onclick="currentSlide(2)"></span> \n' +
    '<span class="dot" onclick="currentSlide(3)"></span> \n' +
    '</div>\n';

document.body.appendChild(div);