Add innerHTML before an element in JavaScript?

Question

Now I am not talking about creating children or a child node, I literally mean HTML. This is what I want to do:

I have a basic node, for example:

<div id="foo"></div>

And I have a string of HTML, that I want to append before that element (kinda like what innerHTML does, with the difference, that I am obviously putting it before, not inside), e.g.:

"<span>hello, world</span><div></div>Foo<img src="logo.png" />Bar"

Now I want to insert that HTML before the div, so my outcome would be:

<span>hello, world</span><div></div>Foo<img src="logo.png" />Bar<div id="foo"></div>

Is there any way I can do this in JavaScript (without any library)? Thanks!

You can do this without any library but it will be quite tricky, including the text node in the end. Why you don't use jQuery (and wrap the whole thing inside an element)? — Minko Gechev, Mar 16 '14 at 15:28
@MinkoGechev: If he's going to wrap the whole thing in an element, it becomes very easy, no need for jQuery at all. It's not *that* hard in any case. — T.J. Crowder, Mar 16 '14 at 15:29
Get the parent node's `innerHTML`, concatenate it to this new HTML, and then store it back as the `innerHTML`. — Barmar, Mar 16 '14 at 15:29
@Barmar: ...which wipes out any event handlers you might have had on the existing elements. — T.J. Crowder, Mar 16 '14 at 15:30
@AlexanderMistakidis This is not what I am trying to do because this gives me a wrapper element, which I don't want. — Ood, Mar 16 '14 at 15:32

score 14 · Answer 1 · answered Mar 16 '14 at 16:26

14

The most elegant and shortest solution is to call insertAdjacentHTML on foo with "beforeBegin" and html string as arguments. Pure JS.

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

answered Mar 16 '14 at 16:26

artur grzesiak

20,230
5
46
56

Way better than my answer. – T.J. Crowder Mar 16 '14 at 17:50

score 3 · Accepted Answer · answered Mar 16 '14 at 15:36

The easiest way is to use a helper element for the parsing, then grab its contents. Like this:

var foo = document.getElementById("foo");
var parent = foo.parentNode;
var helper = document.createElement('div');
helper.innerHTML = yourHTMLString;
while (helper.firstChild) {
    parent.insertBefore(helper.firstChild, foo);
}

There, we create a temporary helper, then assign the string to it to generate the contents, then move those child nodes (which are a mix of elements and text nodes) into foo's parent node, just in front of foo.

Note that depending on the HTML content, you may need a different helper element. For instance, if the string defined table rows or cells.

Complete example - live copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Inserting Before</title>
</head>
<body>
  <div>Before foo</div>
  <div id="foo"></div>
  <div>After foo</div>
  <script>
    setTimeout(function() {
      var yourHTMLString = "<span>hello, world</span><div></div>Foo<img src=\"logo.png\" />Bar";
      var foo = document.getElementById("foo");
      var parent = foo.parentNode;
      var helper = document.createElement('div');
      helper.innerHTML = yourHTMLString;
      while (helper.firstChild) {
        parent.insertBefore(helper.firstChild, foo);
      }
    }, 500);
  </script>
</body>
</html>

Is there any way I can get rid of that helper element, but keep the contents? — Ood, Mar 16 '14 at 15:38

Add innerHTML before an element in JavaScript?

2 Answers2