How to insert a text string before a given element?

Question

JavaScript

Insert a text string before the given element. For example,

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
var sp1 = document.createElement("span");
sp1.innerHTML = "Hello!";
var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore(sp1, sp2);
</script

- this is how everything works, but I get a text string via ajax, where the structure of the inserted html has already been formed. Divas, their classes, etc. are already registered there. That is, I do not need to create document.createElement, everything has already been created. I would like to do so

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;
parentDiv.insertBefore("<div>TEXT</div>", sp2);
</script>

but it does not work, tell me how to do it?

Answer 1

var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;
var sp1 = document.createElement("div");
parentDiv.insertBefore(sp1, sp2);
sp1.outerHTML = "<h1>Result of ajax request</h1>";

There is one subtle point in the documentation :
This means that a newly created element must first be connected to the DOM tree before the outerHTML property becomes writable. Therefore, the order of the last two lines in the example is critical.

Answer 2

<!-- Элемент, перед которым необходимо добавить произвольный html-код  -->
<div id="target">Target</div>

// новый html-контент
var newHtml = '<div><span>Span 1.1</span><span>Span 1.2</span></div><div><span>Span 2.1</span><span>Span 2.2</span></div>';
// вставляем перед целевым элементом
document.getElementById('target').insertAdjacentHTML('beforeBegin', newHtml);

Sandbox example - jsfiddle.net/krfwuksy

Answer 3

Either through a poorly maintained insertAdjacentHTML, as shown above, or you have to parse the result first:

function parseData(data){
   var div = document.createElement("div");
   div.innerHTML = data;
   return Array.prototype.slice.call(div.childNodes)
       .reduce(function(df, child){
           return df.appendChild(child), df;
       }, document.createDocumentFragment())
   ;
}

//str - ваш HTML
//beforer - элемент, перед которым надо вставить str

beforer.parentNode.insertBefore( parseData(str), beforer );

Answer 4

You are trying to insert a string, not an html element, and therefore swears.
Option 1:

var sp2 = document.getElementById("childElement");
sp2 = "<div>TEXT</div>" + sp2;

Option 2:

var sp2 = document.getElementById("childElement");
var parentDiv = sp2.parentNode;
parentDiv.insertAdjacentHTML("afterBegin", "<div>TEXT</div>");

Or as another option:

var sp2 = document.getElementById("childElement");
sp2.insertAdjacentHTML("beforeBegin", "<div>TEXT</div>");