Вставка HTML-элементов с использованием JavaScript

Ответ 1

Вместо прямого взаимодействия с innerHTML может быть лучше создать фрагмент, а затем вставить его:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

Преимущества:

• Вы можете использовать собственные методы DOM для вставки, такие как insertBefore, appendChild и т.д.
• У вас есть доступ к фактическим узлам DOM перед их вставкой; вы можете получить доступ к объекту childNodes фрагмента.
• Использование фрагментов документа очень быстро; быстрее, чем создание элементов вне DOM и в определенных ситуациях быстрее, чем innerHTML.

Несмотря на то, что в функции используется innerHTML, все это происходит за пределами DOM, поэтому оно намного быстрее, чем вы думаете...

Ответ 2

Вы хотите это

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

Ответ 3

Посмотрите insertAdjacentHTML

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

позиция - это позиция относительно элемента, который вы вставляете рядом с:

'beforebegin' Перед самим элементом

'afterbegin' Только внутри элемента, перед его первым дочерним

'beforeend' Просто внутри элемента, после его последнего дочернего

'afterend' После самого элемента

Ответ 4

В старой школе JavaScript вы можете сделать это:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

В ответ на ваш комментарий:

[...] Мне было интересно объявить источник атрибутов и событий нового элемента, а не innerHTML элемента.

Вам нужно добавить новый HTML-код в DOM; поэтому innerHTML используется в примере старой школы JavaScript. Элемент innerHTML элемента BODY добавляется к новому HTML. Мы не трогаем существующий HTML внутри BODY.

Я переписал вышеприведенный пример, чтобы прояснить это:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

Использование структуры JavaScript сделает этот код намного менее подробным и улучшит читаемость. Например, jQuery позволяет сделать следующее:

$('body').prepend('<p id="foo">Some HTML</p>');

Ответ 5

Насколько я знаю, что, если быть справедливым, является довольно новым и ограниченным, единственная потенциальная проблема с этим методом заключается в том, что вам не удается динамически создавать некоторые элементы таблицы.

Я использую форму для шаблонирования, добавляя элементы "шаблона" к скрытому DIV, а затем используя cloneNode (true) для создания клона и добавления его по мере необходимости. Удостоверьтесь в том, что вам нужно убедиться, что вы повторно назначили идентификатор, необходимый для предотвращения дублирования.

Ответ 6

Если вы хотите вставить HTML-код внутри существующего тега страницы, используйте Jnerator. Этот инструмент был создан специально для этой цели.

Вместо написания следующего кода

    var htmlCode = '<ul class=\'menu-countries\'><li
        class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
        class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
        class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

Вы можете написать более понятную структуру

    var jtag = $j.ul({
        class: 'menu-countries',
        child: [
            $j.li({ class: 'item', child: [
                $j.img({ src: 'au.png' }),
                $j.span({ child: 'Australia' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'br.png' }),
                $j.span({ child: 'Brazil' })
            ]}),
            $j.li({ class: 'item', child: [
                $j.img({ src: 'ca.png' }),
                $j.span({ child: 'Canada' })
            ]})
        ]
    });
    var htmlCode = jtag.html();
    var element = document.getElementById('myTag');
    element.innerHTML = htmlCode;

Ответ 7

Как говорили другие, можно эмулировать удобную функцию jQuery prepend:

var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;

В то время как некоторые говорят, что лучше не "возиться" с innerHTML, он надежен во многих случаях использования, если вы это знаете:

Если a <div>, <span> или <noembed> node имеет дочерний текст node, который включает символы (&), (<) или (>), innerHTML возвращает эти символы как &amp, &lt и &gt соответственно. Используйте Node.textContent, чтобы получить правильную копию содержимого этих текстовых узлов.

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Или:

var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)

insertAdjacentHTML, вероятно, является хорошей альтернативой: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML