將HTML插入div

我想將一大塊HTML插入div。我想看看普通的JavaScript方式是否比使用jQuery更快。不幸的是，我忘了怎麼做'舊'的方式。：P將HTML插入div

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％

來源

2009-02-25 mkoryak

現在哪一個更快？普通的JavaScript或jQuery？ – Ali 2013-07-09 08:08:30

@Ali：js更快，請參閱我的編輯。 – mkoryak 2013-07-10 16:47:13

105

我想這就是你想要：

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

請記住，innerHTML無法訪問所有類型的標記時使用IE。（例如表格元素）

來源

2009-02-25 05:06:21 Nathan

+20

提及IE兼容性，希望大家都這樣做！ – Enrico 2013-08-01 12:39:42

使用JQuery會照顧到瀏覽器的不一致性。隨着包含在你的項目中的jQuery庫簡單的寫：

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

您也可以考慮使用：

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

這將在選定的div添加您的畫廊作爲最後一個項目。或者：

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

這會將它添加爲選定div中的第一項。

請參閱這些函數的JQuery的文檔：

來源

2010-12-06 20:01:03 designerdre101

+12

OP專門詢問了純JavaScript，但是這幫助了我，所以我仍然認爲它很有用。 – doubleJ 2012-07-18 18:05:16

我用「+」（加）插入的div HTML：

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

希望得到這個幫助。

來源

2015-10-19 04:04:47

許多行可能看起來像這樣。這裏的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

將HTML插入div

回答

相關問題