向 div 元素插入 HTML

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，所以我写了一个测试：
https://jsben.ch/FBQYM

纯js快10%

- mkoryak

Answer 1

我认为这就是你想要的内容：

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

请记住，在使用IE时，innerHTML不适用于所有类型的标签。（例如表格元素）

- Nathan

---

谢谢你提到IE兼容性，希望每个人都能这样做！（+1表示同意或赞同） - Enrico

有没有其他的解决方案来插入大段的HTML代码？如果我们使用上述方法，就需要在引号之间编写多行HTML代码，这看起来不太专业。 - Praveen Kumar

@PraveenKumar 将一个 + 添加到 Nathan 的代码中，就像 document.getElementById('tag-id').innerHTML += '<ol><li>html data</li></ol>'; 这样，您可以在不删除父 HTML（inner）的情况下添加 HTML 代码。 - MaZzIMo24

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/

- designerdre101

---

OP明确要求使用纯JavaScript，但这对我有所帮助，所以我仍然认为它很有用。 - doubleJ

能否提供一个插入长字符串HTML的示例？例如，我有一个情况，在该情况下，服务器技术（如PHP等）被禁止，并且我想在同一页面内重用约20行HTML。 - Jen

这可能会很有用。谢谢。 - arunken

Answer 3

我使用“+”（加号）将 div 插入到 HTML 中：

document.getElementById('idParent').innerHTML += '<div id="idChild"> 内容 HTML </div>';

希望这有所帮助。

- Yosep Tito

---

这将移除所有事件监听器。 - mcdonalds291

同时删除先前的并行节点值。 - programmer

Answer 4

作为替代方案，您可以使用insertAdjacentHTML - 但是我进行了一些性能测试 - （2019年9月13日星期五）在Chrome 76.0.3809（64位），Safari 12.1.2（13604.5.6），Firefox 69.0.0（64位）上的MacOs High Sierra 10.13.6上。测试F仅供参考 - 它超出了问题范围，因为我们需要动态插入html - 但是在F中，我通过“手动”方式（以静态方式）执行它 - 理论上（据我所知）这应该是插入新html元素的最快方法。

摘要

• A innerHTML =（不要与+=混淆）是最快的（Safari每秒48k次操作，Firefox每秒43k次操作，Chrome每秒23k次操作）。在Chrome上，A比理想解决方案F慢约31％，但在Safari和Firefox上却更快！
• B innerHTML +=... 在所有浏览器中都很慢（Chrome每秒95次操作，Firefox每秒88次操作，Safari每秒84次操作）
• D jQuery在所有浏览器中都是第二慢的（Safari每秒14次操作，Firefox每秒11k次操作，Chrome每秒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>

- Kamil Kiełczewski

---

奇怪，我听说innerHTML应该比insertAdjacentHTML慢得多，通常相差几个数量级，因为innerHTML解析整个文档并对其进行奇怪的字符串处理，而insertAdjacentHTML只是在需要的地方插入它。不确定为什么现在情况相反了？也许是某些性能更新或其他原因？ - Sebastian Norr

从我的个人经验来看，我可以说insertAdjacentHTML比innerHTML快得多。 - math

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

- Majid Gabrlo

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

- atom

Answer 7

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

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

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

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

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

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

document.body.appendChild(div);

- atom

---

好的。这是一些代码。这是很多代码。它似乎没有说出2009年已经更清楚地表达了的任何内容。 - Quentin

@Quentin 我推荐这种方法。可以使用Visual Studio Code进行格式化（美化）。最近，我一直在使用它，因为它成功地与React的可读性竞争，而我不喜欢React，因为我肯定更喜欢DOM。 - atom