body.innerHTML до / после n-го ребенка - PullRequest
Новая
       22

body.innerHTML до / после n-го ребенка

2 голосов
/ 26 февраля 2012

Можно ли что-то добавить с помощью innerHTML до / после n-го дочернего элемента <body>?

например:. 

<html>
<head></head>
<body>
<div id="first">First</div>
<div id="second">Second<div id="second_sub"></div></div>
<div id="third">Third</div>
</body>
</html>

Я могу добавить в начале с body.innerHTML = html + body.innerHTML и в конце с body.innerHTML += html, но как добавить, например, перед вторым <div>?

Я не хочу использовать замену на <div id="second">, так как источник меняется, и вставка должна выполняться случайным образом. Есть ли решение с innerHTML или мне нужно переключиться на Dom Nodes? Было бы медленно в старых браузерах: (

Ответы [ 2 ]

2 голосов
/ 28 февраля 2012

Я использую это сейчас (спасибо ajax333221): 

e = document.createElement('div');
e.innerHTML = '<div>... huge content with several sub elements ...</div>';
document.body.insertBefore(e, document.body.childNodes[2]);

Это комбинация обоих методов.Благодаря этому я могу использовать быстрый .innerHTML без чрезмерного взрыва кода с помощью createElement (), setAttribute () и т. Д.

Приветствуются другие решения.

1 голос
/ 26 февраля 2012

Возможно, вы ищете метод insertBefore . Он вставит дочерний элемент перед данным элементом. В качестве альтернативы есть метод appendChild , который всегда помещает элементы в начало данного элемента. Примеры: 

<body>
    <span id="elem1">Hello</span>
    <span id="elem2">World</span>
</body>

Давайте предположим, что мы вставляем новый элемент, хранящийся в var newElem: document.insertBefore(newElem, document.getElementById("elem2")) даст: 

<body>
    <span id="elem1">Hello</span>
    <!-- New element here! -->
    <span id="elem2">World</span>
</body>

document.appendChild(newElem) даст: 

<body>
    <!-- New element here! -->
    <span id="elem1">Hello</span>
    <span id="elem2">World</span>
</body>
...