Вставка HTML в div

Я пытаюсь вставить кусок 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

plain js на 10% быстрее

Ответы

Ответ 1

Я думаю, что это то, что вы хотите:

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

Имейте в виду, что innerHTML недоступен для всех типов тегов при использовании IE. (например, элементы таблицы)

Ответ 2

Использование JQuery позаботится о непоследовательности браузера. Если библиотека jquery включена в ваш проект, просто напишите:

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

Вы также можете рассмотреть возможность использования:

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

Это добавит вашу галерею в качестве последнего элемента в выбранном div. Или:

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

Это добавит его как первый элемент в выбранном div.

См. документы JQuery для этих функций:

Ответ 3

Я использую "+" (плюс) для вставки div в html:

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

Надеюсь на эту помощь.

Ответ 4

И многие строки могут выглядеть так. 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);

Ответ 5

Вот мое предложение добавить HTML-код в элемент div:

<div id="container"></div>

JS-код, который использует insertAdjacentHTML:

document.getElementById('container').insertAdjacentHTML('beforeend', '<div id="idChild"> content html </div>');

И вот небольшое сравнение производительности - (2018.07.02) MacOs 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