Как вставить HTML перед элементом в JavaScript без jQuery?

Ответ 1

Изменить: Я предпочитаю ответ @Rob W и думаю, что это должен быть принятый ответ, а не этот.

Это будет делать то, что вы хотите, без поддержки каких-либо раздутых библиотек, таких как jQuery.

var my_elem = document.getElementById('my_id');

var span = document.createElement('span');
    span.innerHTML = '*';
    span.className = 'asterisk';

my_elem.parentNode.insertBefore(span, my_elem);

Ответ 2

Малоизвестный метод - это element.insertAdjacentHTML. С помощью этого метода (поддерживаемого всеми основными браузерами, включая IE 4), вы можете взять произвольную строку HTML и вставить ее в любом месте документа.

Чтобы проиллюстрировать мощность метода, используйте свой пример...:

$("#my_id").before('<span class="asterisk">*</span>');

становится

document.getElementById('my_id').insertAdjacentHTML('beforebegin',
    '<span class="asterisk">*</span>');

insertAdjacentHTML первый аргумент определяет позицию вставки. Здесь сравнение с jQuery:

• $().before - 'beforebegin'
• $().prepend - 'afterbegin'
• $().append - 'beforeend'
• $().insertAfter - 'afterend'

Как вы можете видеть, он очень прост в использовании. Предполагая, что селектор jQuery возвращает только один элемент, вы обычно можете использовать document.querySelector, но в этом конкретном случае с помощью document.getElementById является более эффективным.

Ответ 3

Вы можете создать свою собственную функцию в javascript, например,

код

var id = document.getElementById('my_id');
var s = document.createElement('span');
s.innerHTML = '*';
s.className = 'asterisk';
id.parentNode.insertBefore(s, id);

InsertBefore Docs и Пример

Вы можете создать функцию до, например,

before: function() {
    return this.domManip( arguments, false, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this );
        }
    });
},

источник из http://code.jquery.com/jquery-1.9.1.js