Add innerHTML before an element in JavaScript? [duplicate]

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
– Minko Gechev, Commented Mar 16, 2014 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
– T.J. Crowder, Commented Mar 16, 2014 at 15:29
Get the parent node's innerHTML, concatenate it to this new HTML, and then store it back as the innerHTML. — Barmar
– Barmar, Commented Mar 16, 2014 at 15:29
@Barmar: ...which wipes out any event handlers you might have had on the existing elements. — T.J. Crowder
– T.J. Crowder, Commented Mar 16, 2014 at 15:30

artur grzesiak · Accepted Answer · 2014-03-16 16:26:37Z

15

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, 2014 at 16:26

artur grzesiak

20.9k5 gold badges49 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

T.J. Crowder Over a year ago

Way better than my answer.

T.J. Crowder · Accepted Answer · 2014-03-16 15:36:44Z

3

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>

answered Mar 16, 2014 at 15:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

Ood Over a year ago

Is there any way I can get rid of that helper element, but keep the contents?

T.J. Crowder Over a year ago

@Ood: That's what the above does.

Collectives™ on Stack Overflow

Add innerHTML before an element in JavaScript? [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related