Как вставить строку HTML между двумя узлами DOM?

Question

Рассмотрим следующий фрагмент DOM:

<div id="div-1">foo</div>
<div id="div-2">bar</div>

Можно ли вставить строку HTML (EDIT: содержащую теги для отображения) между элементами div без , оборачивая ее в другой элемент div (EDIT: или другой тег), созданный с помощью document.createElement, и установив его innerHTML свойство

Answer 1

Большинство браузеров поддерживают element#insertAdjacentHTML(), что в итоге стало стандартом в спецификации HTML5 .К сожалению, Firefox 7 и ниже не поддерживают его, но мне удалось найти обходной путь, который использует диапазоны для вставки HTML.Я адаптировал его ниже для работы в вашем сценарии:

var el = document.getElementById("div-2"),
    html = "<span>Some HTML <b>here</b></span>";

// Internet Explorer, Opera, Chrome, Firefox 8+ and Safari
if (el.insertAdjacentHTML)
    el.insertAdjacentHTML ("beforebegin", html);
else {
    var range = document.createRange();
    var frag = range.createContextualFragment(html);
    el.parentNode.insertBefore(frag, el);
}

Живой пример: http://jsfiddle.net/AndyE/jARTf/

Answer 2

Это делается для простого текста, именно так я и читаю ваш исходный вопрос (см. Ниже обновление для строк, содержащих теги):

var div = document.getElementById('div-2');
var textNode = document.createTextNode('your text');
div.parentNode.insertBefore(textNode, div);

Живой пример

Если вы начнете с:

<div id="div-1">foo</div>div id="div-2">bar</div>

(обратите внимание, что между ними нет пробелов), тогда результат вышеописанного - именно то, что вы получите с этим HTML:

<div id="div-1">foo</div>your text<div id="div-2">bar</div>

Если у вас действительно есть этот пробел между div, у вас уже будет текстовый узел, и выше будет вставлен еще один рядом с ним. Практически для всех намерений и целей это не имеет значения, но если это вас беспокоит, вы можете вместо этого добавить к существующему текстовому узлу:

var text = 'your text';
var div = document.getElementById('div-2');
var prev = div.previousSibling;
if (prev && prev.nodeType == 3) { // 3 == TEXT_NODE
  // Prev is a text node, append to it
  prev.nodeValue = prev.nodeValue + text;
}
else {
  // Prev isn't a text node, insert one
  var textNode = document.createTextNode(text);
  div.parentNode.insertBefore(textNode, div);
}

Живой пример

Ссылки на документы W3C: insertBefore, createTextNode

Включая теги HTML

В своем пересмотренном вопросе вы сказали, что хотите включить теги, которые будут интерпретироваться при выполнении всего этого. Это возможно, но это окольный. Сначала вы помещаете строку HTML в элемент, а затем перемещаете содержимое, как показано ниже:

var text, div, tempdiv, node, next, parent;

// The text
text = 'your text <em>with</em> <strong>tags</strong> in it';

// Get the element to insert in front of, and its parent
div = document.getElementById('div-2');
parent = div.parentNode;

// Create a temporary container and render the HTML to it
tempdiv = document.createElement('div');
tempdiv.innerHTML = text;

// Walk through the children of the container, moving them
// to the desired target. Note that we have to be sure to
// grab the node's next sibling *before* we move it, because
// these things are live and when we moev it, well, the next
// sibling will become div-2!
node = tempdiv.firstChild;
next = node.nextSibling;
while (node) {
  parent.insertBefore(node, div);
  node = next;
  next = node ? node.nextSibling : undefined;
}

Живой пример

Но здесь есть драконы , вы должны выбрать элемент контейнера в соответствии с содержимым, которое вы вставляете. Например, мы не могли использовать <tr> в вашем тексте с кодом выше, потому что мы вставляем его в div, а не в tbody, и поэтому это неверно, а результаты зависят от реализации. Именно из-за таких сложностей у нас есть библиотеки, которые могут нам помочь. Вы просили получить сырой DOM-ответ, и это то, что выше, но я действительно проверю jQuery , Закрытие , Прототип , YUI или любой из нескольких других . Они сгладят много вещей для вас.

Answer 3

Используя jquery, это очень просто:

$("#div-1").after("Other tag here!!!");

См .: jquery.after

Очевидно, что javascript не является чистым решением javascript.

Answer 4

var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText"));

Вы ищете: insertBefore