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

Вместо утомительного поиска обходных путей для каждого типа атрибута и события при использовании следующего синтаксиса:

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

Есть ли способ просто объявить весь HTML-элемент в виде строки? лайк:

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

Вместо того, чтобы напрямую возиться с 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]);

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

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

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

Вы хотите это

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

Взгляните на 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>

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

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

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

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

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

В старом 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>');

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

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

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

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

Хотя некоторые говорят, что с innerHTML лучше не «связываться» , во многих случаях он надежен, если вы знаете следующее:

Если узел <div>, <span>или <noembed>имеет дочерний текстовый узел, содержащий символы ( &), ( <) или ( >), 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

Если вы хотите вставить 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;