Как передвинуть при нажатии на кнопку?

Question

[Алексей Фобиус]

Как сдвинуть див при нажатии на кнопку? не просто позиционировать, а именно сменить его положение?
или же допустим поменять его местами с другим дивом

Answer 1

[Вадим]

Теория: https://learn.javascript.ru/modifying-document
Примитивная демка:


Если вызвать append для элемента, который уже есть в дереве, то он вырежется из предыдущего места и вставится в указанное.

Comments

[Алексей Фобиус]

а можно ли как-то конкретно сдвигать последующие дивы?
ну вот допустим с каждым нажатием на кнопку у меня создается новый див
и мне просто нужно чтобы они вниз съезжали поочередно

[Вадим]

Алексей Фобиус, Не совсем понятна проблема.
При добавлении элемента в начало родительского контейнера - все последующие сместятся

[Вадим]

Алексей Фобиус, Пример бы какой-нибудь, или хотя бы более развёрнутое описание

[Алексей Фобиус]

Вадим, пример моего кода :

HTML:

<input type='text' placeholder="писать сюда" value='' id='input_board'>
	<button onclick='create();concat();clean()'>Отправить</button>

	<div id='bar'><p></p></div>

	<script>
		function concat() {
		var foo = document.getElementById('input_board').value;
		var bar = document.getElementsByTagName('p')[0].innerHTML;
		document.getElementById('message_div').innerHTML = foo + bar;
		}
	</script>

	<script>
		function clean() {
		var foo = document.getElementById('bar').value;
		var bar = document.getElementsByTagName('p')[0].innerHTML;
		document.getElementById('input_board').value = '';
		}
	</script>

JS:

function create() {
    var l = document.createElement('div');
    l.className = "newDiv";
    l.id = 'message_div';
    l.style.top = '100px';
    document.body.appendChild(l);
}

на самом деле не знаю зачем я создал js файл если мог это все в хтмл написать, в общем это потом уже решу, секундное дело

в чем задача:

мы пишем текст, нажимаем на отправить и создается новый див с нашим текстом
и вот мне нужно их по иерархии сверху вниз расположить (сверху новые)

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

как мне создавая новый див, сдвигать все предыдущие вниз, просто сдвигать и все

[Вадим]

Алексей Фобиус, Так как Вы привели пример с не полной разметкой (нет message_div), а так же, видимо, поленились читать статью по работе с модификацией документа, я сделал для Вас ещё одну демку.
Правда все Ваши скрипты выкинул.

Если не начнёте учить базовые вещи - далеко не уедете.

[Алексей Фобиус]

Вадим, я уже разобрался еще вчера насчет спавна и создания уникального айди, сдвигов и прочего, там все намного проще чем оказалось, чуть позже отправлю код в ответ, может пригодиться кому