Как вставить текстовую строку перед заданным элементом?

Question

[jle34925]

Необходимо вставить текстовую строку перед заданным элементом. Например,

<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

- так все работает, но я получаю через ajax текстовую строку, где уже сформирована структуда вставляемого html. Там уже прописаны дивы, их классы и т.д. То есть создавать document.createElement мне не нужно, уже все создано. Хотелось бы сделать так

<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>

но не работает, подскажите, как сделать?

Comments

[Виталий Инчин ☢]

Вопрос закрыт?

Answer 1

[nirvimel]

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>";

В документации есть один тонкий момент:

If the element has no parent node, that is if it is the root node of the document, setting its outerHTML property will throw a DOMException with the error code NO_MODIFICATION_ALLOWED_ERR.

Это означает, что свежесозданный элемент должен сначала быть подключен к DOM-дереву прежде чем свойство outerHTML становится доступным на запись. Поэтому порядок последних двух строк в примере критичен.

Comments

[keslo]

Скорее всего вместо sp3 -> sp1?
Но у меня такой вариант не работает.

[nirvimel]

keslo: Не работать может если у вас не один элемент в корне в html-фрагменте, типа
sp1.outerHTML = "<div></div><h1></h1>";
В таком случае только так
sp1.innerHTML = "<div></div><h1></h1>";
Так фрагмент, конечно, завернется в другой элемент, но иначе никак.

[keslo]

nirvimel: jsfiddle.net/08eo6uac не работает

[nirvimel]

keslo: Надо только поменять порядок строк: https://jsfiddle.net/420p02dn/

[keslo]

nirvimel: понял. Согласен.

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);

Пример в песочнице - jsfiddle.net/krfwuksy

Answer 3

[Виталий Инчин ☢]

Либо через плохо поддерживаемый insertAdjacentHTML, как показали вам выше, либо придется сначала распарсить результат:

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

[keslo]

Вы пытаетесь вставить строку, а не html-элемент, поэтому и ругается.

Вариант 1:

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

Вариант 2:

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

Или как еще вариант:

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