Вставка элементов HTML с JavaScript

Question

Вставка элементов 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

javascript html dynamic-websites

задан YakovL 27 August 2019 в 16:23

2 ответа

В старой школе 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

Другие вопросы по тегам:

javascript html dynamic-websites

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

score 123 · Accepted Answer

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