将 HTML 插入 div

Posted 2023-05-07

【中文标题】将 HTML 插入 div

【英文标题】：Inserting HTML into a div

【发布时间】：2010-10-09 17:50:38

【问题描述】：

我正在尝试将一大段 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 还是plain js，所以我写了一个测试：http://jsperf.com/html-insertion-js-vs-jquery

普通 js 速度快 10%

【参考方案1】：

我想这就是你想要的：

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

请记住，在使用 IE 时，并非所有类型的标签都可以访问 innerHTML。 （例如表格元素）

【讨论】：

+1 提到了 IE 的兼容性，希望大家都这样做！

是否有其他解决方案可以插入大的 HTML 代码？如果我们使用上述方法，我们应该在引号之间写多行 HTML 代码，这看起来不专业。

【参考方案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/

【讨论】：

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

将有助于查看插入一长串 Html 的示例。例如，我有一个不允许使用服务器技术（php 等）的案例，我想在同一页面内重复使用大约 20 行 html。

这可能会派上用场。谢谢。

【参考方案3】：

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

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

希望对您有所帮助。

【讨论】：

这将删除所有事件监听器

同时删除之前的并行节点值。

【参考方案4】：

作为替代方案，您可以使用insertAdjacentHTML - 但是我深入研究并进行了一些性能测试 - （2019.09.13 Friday）MacOs High Sierra 10.13.6 on Chrome 76.0.3809（64 位），Safari 12.1.2（ 13604.5.6)，火狐 69.0.0（64 位））。测试 F 仅供参考 - 它不在问题范围内，因为我们需要动态插入 html - 但在 F 我是通过“手工”（在静态方式）-理论上（据我所知）这应该是插入新html元素的最快方法。

摘要

A

innerHTML =（不要与 += 混淆）最快（Safari 每秒 48k 操作，Firefox 43k op/sec，Chrome 23k op/sec）

A

比理想解决方案慢约 31%

F

仅 chrome 但在 safari 和 firefox 上更快（！）

B

innerHTML +=... 在所有浏览器上最慢（Chrome 95 op/sec，Firefox 88 op/sec，Sfari 84 op/sec）

D

jQuery 在所有浏览器（Safari 14 op/sec、Firefox 11k op/sec、Chrome 7k op/sec）上都是第二慢的 参考解决方案

F

（理论上最快）在 firefox 和 safari 上并不是最快的 (!!!) - 这令人惊讶 最快的浏览器是 Safari

更多关于为什么innerHTML = 比innerHTML += 快得多的信息是here。您可以在您的机器/浏览器上进行测试HERE

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>

【讨论】：

奇怪，我听说 innerHTML 应该比 insertAdjacentHTML 慢得多，通常要慢几个数量级，因为 innerHTML 会解析整个文档并对它进行奇怪的字符串处理，而 insertAdjacentHTML 只是将它插入到它的位置是需要的。不知道为什么它现在是对面？也许一些性能更新或什么？

【参考方案5】：

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

【参考方案6】：

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