How to insert HTML before element in JavaScript without jQuery? [closed]

Question

Is there a pure JavaScript function for inserting HTML before another element? In jQuery it can be accomplished like this:

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

If there isn't any equivalent JavaScript function how can I achieve the described functionality?

Answer 1

A little-known method is the element.insertAdjacentHTML. With this method (supported by all major browsers, including IE 4), you can take an arbitrary HTML string, and insert it anywhere in the document.

To illustrate the power of the method, let's use your example...:

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

Becomes

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

insertAdjacentHTML's first argument determines the insertion position. Here's a comparison with jQuery:

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

As you can see, it's very easy to use. Assuming that the jQuery selector returns only one element, you can in general use document.querySelector, but in this specific case, using document.getElementById is more efficient.

Answer 2

Edit: I prefer @Rob W's answer and think that that should be the accepted answer, not this one.

---

This will do what you want, without needing the support of any bloated libraries like 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);