将HTML插入div

Question

我试图将一大块HTML插入到div中.我想看看简单的JavaScript方式是否比使用jQuery更快.不幸的是,我忘记了如何以"旧"的方式做到这一点.: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);
}

我在这里做错了什么？

编辑:
有人问哪个更快,jquery或普通js所以我写了一个测试:http:
//jsperf.com/html-insertion-js-vs-jquery

普通js快10%

Answer 1

我想这就是你想要的:

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

请记住,使用IE时,innerHTML不能用于所有类型的标记.(例如表格元素)

Answer 2

使用JQuery会处理浏览器的不一致性.使用项目中包含的jquery库只需编写:

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

您也可以考虑使用:

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

这会将您的图库添加为所选div中的最后一项.要么:

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

这会将其添加为所选div中的第一项.

有关这些函数,请参阅JQuery文档:

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

Answer 3

我使用"+"(加号)将div插入html:

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

希望这有帮助.

Answer 4

试试insertAdjacentHTML

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}

这里有一些小的性能比较 - (2018.07.02)MacO High Sierra 10.13.3在Chrome 67.0.3396.99(64位),Safari 11.0.3(13604.5.6),Firefox 59.0.2(64位)):

我们可以看到insertAdjacentHTML是最快的(每秒Safari 117M操作,Chrome 69M,Firefox 39M),因此普通javascript比jQuery(在所有浏览器上)都快.innerHTML =对于所有浏览器,它比jQuery慢.

在这里,您可以在您的机器/浏览器上进行测试:https://jsperf.com/insert-html-to-div

Answer 5

document.getElementById('tag-id').insertAdjacentHTML("beforebegin",'<ol><li>html data</li></ol>')

'beforebegin'：在元素本身之前
'afterbegin'：在元素内部，在其第一个子元素之前
'beforeend'：在元素内部，在其最后一个子元素之后
'afterend'：在元素本身之后

更多详细信息：developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 6

许多行可能看起来像这样.这里的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);