Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Помогите правильно добавить объект

Автор: LittleFuntik 16.12.2008, 01:18

В общем, есть такая структура.

Код


<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
...
</div>

Как мне с помощью JavaScript сделать следующее:
нужно добавить <div>n</div> в конец родителя container, при этом, удалив первый объект div.
То есть "колесико" такое получается.

А то голова не варит сейчас. Вам же на пользу... :(

smile

Автор: bars80080 16.12.2008, 01:43

а не проще обновить все элементы на n+1 ? или там всё-таки не числа? или там не не несколько контейнеров, а гораздо больше?

Автор: LittleFuntik 16.12.2008, 01:51

Там не числа будут... То сообщения в чате. То есть...
Я делаю чат с этим чудо ajax'ом. smile

Если новое сообщение нашлось, то выдвинуть одно старое и поместить вниз новое.

Автор: IDVsbruck 16.12.2008, 04:33

Ну, с помощью js можно попробовать так:

Код

var container = document.getElementById("container");
if (container.children.length > 3) container.removeChild(container.children[0]);
var new_div = document.createElement("div");
new_div.style.{needed_styles} = ...;
new_div.innerHtml = "{text next row}";
container.appendChild(new_div);

Код будет работать при условии, что в контейнере находятся только дивы. В противном случае надо делать цикл и перебирать все дочерние элементы, пока не встретится первый див. Его удалять и вставлять новый.
Тут очень удобно было бы использовать какую-то библиотеку, к примеру, jQuery. У нее здорово сделаны селекторы и выбор первого дива крайне прост - $("#container div:first").remove() - это и нахождение и удаление. Аналогично добавление - $("#container").append($("<div>").html({text in new div}).css({styles})). Предельно просто и предельно коротко.

Автор: LittleFuntik 16.12.2008, 20:51

Спасибо! Все таки подключу библиотеку jQuery. Так почему то не хотелось smile

Все ручками - приятнее

Автор: ksnk 17.12.2008, 00:50

Выбор первого дива достаточно прост в этом случае не только в jQuery, на чистом js оно пишется не сильно страшнее.

Код


var el=document.getElementById('container ').getElementsByTagName('div')[0];
el.parentNode.removeChild(el);

Хотя, если еще и проверять существование промежуточных результатов, получится на пару строк поболее..