div에 HTML 삽입

div에 HTML 덩어리를 삽입하려고합니다. 일반 JavaScript 방식이 jQuery를 사용하는 것보다 빠른지 확인하고 싶습니다. 불행히도 나는 '오래된'방식으로하는 방법을 잊었다. :피

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);
}

내가 여기서 뭘 잘못하고 있니?

편집 :
누군가가 더 빠른 jquery 또는 일반 js를 물었으므로 테스트를 작성했습니다.
http://jsperf.com/html-insertion-js-vs-jquery

일반 js는 10 % 더 빠릅니다.

나는 이것이 당신이 원하는 것이라고 생각합니다.

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

IE를 사용할 때 모든 유형의 태그에 대해 innerHTML에 액세스 할 수있는 것은 아닙니다. (예 : 테이블 요소)

JQuery를 사용하면 브라우저 불일치를 처리 할 수 ​​있습니다. 프로젝트에 포함 된 jquery 라이브러리를 사용하여 다음과 같이 작성하면됩니다.

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

다음을 사용할 수도 있습니다.

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

그러면 선택한 div의 마지막 항목으로 갤러리가 추가됩니다. 또는:

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

그러면 선택한 div의 첫 번째 항목으로 추가됩니다.

이러한 함수에 대해서는 JQuery 문서를 참조하십시오.

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

"+"(더하기)를 사용하여 div를 html에 삽입합니다.

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

이 도움을 바랍니다.

대안으로 insertAdjacentHTML 을 사용할 수 있습니다. 그러나 몇 가지 성능 테스트를 수행합니다. (2019.09.13 Friday) MacOs High Sierra 10.13.6 on Chrome 76.0.3809 (64 비트), Safari 12.1.2 (13604.5.6), Firefox 69.0.0 (64 비트)). 테스트 F 는 참조 용일뿐입니다. 동적 html을 삽입해야하므로 문제 범위를 벗어납니다.하지만 F 에서는 '손'(정적 방식으로)으로 수행합니다. 이론적으로 (내가 아는 한) 이것은 새로운 HTML 요소를 삽입하는 가장 빠른 방법입니다.

요약

• A는 innerHTML = (하지 혼동과 함께 할 +=가장 빠른 (사파리 초당 48K 운영, 파이어 폭스 43K 영업 이익 / 초, 크롬 23K 영업 이익 / 초)는 IS) A는 이상적인 솔루션보다 느리게 ~ 31 %의 F 전용 (크롬하지만 사파리와 파이어 폭스가 더 빠르다 !)
• B가 innerHTML +=... 모든 브라우저에서 가장 느리다 (크롬 95 OP / 초, 파이어 폭스 88 OP / 초, 84 Sfari OP / 초)
• D jQuery를 모든 브라우저 (사파리 (14) 영업 이익 / 초, 파이어 폭스 11K 영업 이익 / 초, 크롬 7K 영업 이익 / 초) 느린 두 번째
• 참조 솔루션 F (이론적으로 가장 빠름)는 firefox 및 safari (!!!)에서 가장 빠르지 않습니다. 이는 놀랍습니다.
• 가장 빠른 브라우저는 Safari였습니다.

이유에 대한 자세한 정보 innerHTML =보다 훨씬 빠르기 innerHTML +=입니다 여기 . 여기에서 컴퓨터 / 브라우저에서 테스트를 수행 할 수 있습니다.

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>

그리고 많은 줄이 이렇게 보일 수 있습니다. 여기 html은 샘플 일뿐입니다.

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);