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

Question

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

   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]);

Answer 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]);

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

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

---

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

Answer 2

Вы хотите это

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

Answer 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>

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

beforebegin ' Перед самой стихией

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

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

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

Answer 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>');

Answer 5

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

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

Answer 6

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

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

Answer 7

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