div에 HTML 삽입

div에 여러 청크를 삽입하려고합니다. 일반 JavaScript 방식이 jQuery를 사용하는 것보다 빠르다는 것을 알고 싶습니다. 불행히도, 나는 그것을 '오래된'방식으로하는 것을 잊어 버렸습니다. : Pdiv에 HTML 삽입

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 그래서 내가 테스트 썼습니다 :

출처

2009-02-25 mkoryak

이제 어느 것이 더 빠릅니까? 일반 자바 스크립트 또는 jquery? – Ali

@Ali : js가 빠릅니다. 편집을 참조하십시오. – mkoryak

105

나는 이것이 무엇을 생각
http://jsperf.com/html-insertion-js-vs-jquery

일반 JS를 10 % 더 빠른 당신 원하는 :

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

모든 유형의 태그에 대해 innerHTML에 액세스 할 수 없습니다. IE를 사용합니다. (예 : 테이블 요소)

출처

2009-02-25 05:06:21 Nathan

+20

IE 호환성을 언급 한 +1 모두가 이랬 으면 좋겠다! – Enrico

JQuery를 사용하면 브라우저 불일치가 발생합니다. jQuery 라이브러리 프로젝트에 포함로 간단하게 쓰기 :

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

당신은 또한 사용을 고려할 수 있습니다

이

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

이 선택한 사업부의 마지막 항목으로 갤러리를 추가합니다. 또는 :

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

이렇게하면 선택한 div의 첫 번째 항목으로 추가됩니다.

는 이러한 기능에 대한 JQuery와 문서를 참조하십시오 :

출처

2010-12-06 20:01:03 designerdre101

+12

OP가 일반 자바 스크립트를 구체적으로 요구했으나 이것이 도움이 되었기 때문에 여전히 유용하다고 생각합니다. – doubleJ

긴 문자열 Html이 삽입 된 예제를 보는 데 도움이 될 것입니다. 예를 들어, 서버 기술 (PHP 등)이 허용되지 않는 경우가 있는데, 같은 페이지에서 약 20 줄의 html을 다시 사용하고 싶습니다. –

내가 사용하는 "+"(플러스) HTML로 사업부를 삽입하려면 :

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

희망이 도움이됩니다.

출처

2015-10-19 04:04:47

+ 답을 주셔서 감사합니다. 그 결과 저에게 많은 두통이 생겼습니다. –

@MichaelTunnell 정말 했어요. – divine

그리고 많은 줄이 이렇게 보일 수 있습니다. 여기서 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);

출처

2016-11-08 12:06:29 atom

div에 HTML 삽입

답변

관련 문제