Вставка элементов 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]);
99
задан YakovL 27 August 2019 в 16:23
поделиться

2 ответа

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

123
ответ дан 24 November 2019 в 04:59
поделиться

В старой школе 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>');
18
ответ дан 24 November 2019 в 04:59
поделиться
Другие вопросы по тегам:

Похожие вопросы: