Вставка 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]);
92
dynamic-websites html javascript

7 ответов

вместо того, чтобы напрямую связываться с 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, поэтому это намного быстрее, чем вы думаете...

118

вы хотите, чтобы этот

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

посмотреть 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' После сам элемент

22

в старой школе JavaScript вы можете сделать следующее:

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

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

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

вам нужно ввести новый HTML в DOM, хотя; вот почему innerHTML используется в Примере JavaScript старой школы. The 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 framework сделает этот код гораздо менее подробным и улучшит читаемость. Например, jQuery позволяет сделать следующее:

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

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

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

1

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

как говорили другие, удобный 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

0