Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вставить два и более блока через insertBefore (https://javascript.ru/forum/misc/65272-vstavit-dva-i-bolee-bloka-cherez-insertbefore.html)

makc_mb 09.10.2016 14:40

Вставить два и более блока через insertBefore
 
С помощью метода insertBefore вставляю созданный блок div в нужное место, т.е. в родителя parentDiv ставлю newblock перед elem.

parentDiv.insertBefore(newblock, elem);


Тут всё ясно, а вот как вставить рядом такой же newblock? Т.е. как-то можно выполнить такой же insertBefore ещё раз?

makc_mb 09.10.2016 14:46

Всё, понял, надо создать ещё один блок

Aetae 09.10.2016 17:43

А я не понял.)
Возможно тебе нужен document.createDocumentFragment(), чтоб одним insretBefore вставить несколько элементов, а может быть тебе нужен Element.cloneNode(true), чтобы склонировать один элемент несколько раз...

makc_mb 10.10.2016 20:07

Тогда я тоже не понял.
Хочу сделать вот что - нужно создать блок, и вставить его в определённое место несколько раз, количество раз рассчитывается отдельно. Собственно, придумал делать это в цикле.

n - рассчитывается ранее

for (var i=1; i<=n; i++) {

var newblock[i] = document.createElement('div');
newblock[i].className = "class";
newblock[i].innerHTML = "Текст блока [i]";

parentDiv.insertBefore(newblock[i], elem);

}

Aetae 10.10.2016 23:28

Всё в принципе верно(кроме "var newblock[i]", но думаю тут просто опечатка, ибо оно просто не стало бы работать).

А так, с помощью фрагмента возможна микрооптимизация:
var fragment = document.createDocumentFragment();
for (var i=0; i<n; i++) {
    var newblock = document.createElement('div');
    newblock.className = "class";
    newblock.innerHTML = "Текст блока [i]";
    fragment.appendChild(newblock);
}
parentDiv.insertBefore(fragment, elem);

Если же элементы вообще одинаковые, то тут пригодится клон:
var newblock = document.createElement('div');
newblock.className = "class";
newblock.innerHTML = "Текст блока";
var fragment = document.createDocumentFragment();
while(n--) fragment.appendChild(newblock.cloneNode(true));
parentDiv.insertBefore(fragment, elem);

warren buffet 11.10.2016 06:24

Я бы сгенерил html-текст и вштырил бы его единовременно куда сказано via innerHTML=

Живые элементы интересно создавать в рамках задачи управления ими, а если никаких рамок, зачем они нужны.

Aetae 11.10.2016 13:39

warren buffet, тогда уж через insertAdjacentHTML.)

warren buffet 11.10.2016 20:47

Да, этим методом, могучая вещь. ТС, посмотри его в мануале, там 4 опции - до, первым, последним и после.

makc_mb 12.10.2016 01:43

Спаисбо, с этим разобрался.

А что, если мне нужны разные блоки?

var n=2;
for (var i=0; i<n; i++) {
	var newblock = document.createElement('div');
	newblock.className = "class";
	newblock.innerHTML = "Текст блока";
	parentDiv.insertBefore(newblock, elem);
}


newblock1 и newblock2

warren buffet 13.10.2016 11:57

Я еще тогда подумал откуда контент-то брать. Ну и откуда?


Часовой пояс GMT +3, время: 10:11.