Добавить элемент в другой элемент при помощи JS

JavaScript
Чернов Анатолий
29.07.2018 01:04:44 pm
Здравствуйте.
Ребят, сразу оговорюсь, в языках программирования я не разбираюсь, только планирую изучать, как появится свободное время. А тут нужда заставляет добавить программу на сайт, да так скоро, что пока я буду изучать, станет поздно. Я надеюсь Вы меня поймёте и пойдёте мне на встречу. Спасибо.

Мне нужно осуществить добавление элемента в существующий элемент, в момент нажатия на кнопку. Код кнопки такой: 
<button class="button_add">{L_RULE_ADD}</button>

Код добавляемого элемента: 
<div class="window_notice">
    <h4>{L_NOTICE_TITLE}</h4>
    <p>{L_NOTICE_TEXT}</p>
    <button class="accepted">{L_ACCEPTED}</button>
    <button class="reject">{L_REJECT}</button>
</div>

Заранее спасибо.
Dolphin
29.07.2018 01:59:42 pm
Здравствуйте, Анатолий!
В какой элемент необходимо добавить блок? Класс "button_add" один раз встречается на странице?
Допустим блок необходимо добавить в блок с идентификатором "block", а класс "button_add" встречается один раз. Делаем так:
document.getElementsByClassName('button_add')[0].onclick = function() {
	document.getElementById('block').innerHTML = '<div class="window_notice"><h4>{L_NOTICE_TITLE}</h4><p>{L_NOTICE_TEXT}</p><button class="accepted">{L_ACCEPTED}</button><button class="reject">{L_REJECT}</button></div>';
};

Возможно, будет интересно:
- Добавление блока в блок по клику на jQuery
- Как добавить новое поле на JavaScript
- Как клонировать элементы на jQuery
Чернов Анатолий
29.07.2018 09:09:14 pm
Slash, блок должен добавится в тело страницы или, появится в конце body. Блок должен появиться выше всех деталей документа.
Dolphin
30.07.2018 04:13:50 pm
Выходит, Вам нужен фиксированный блок? Если да, то могу предложить такой вариант: вставляем блок перед тегом </body>, назначаем стиль:
.window_notice {
	display: none;
	height: 150px;
	width: 300px;
	position: fixed;
	top: 50px;
	left: 50px;
}

Размеры место на экране блока задайте свои. И сценарий:
document.getElementsByClassName('button_add')[0].onclick = function() {
	document.getElementsByClassName('window_notice')[0].style.display = 'block';
};

Все. Готово.
Чернов Анатолий
30.07.2018 07:45:40 pm
Верно, мне нужен фиксированный блок.
Добавление блока работает, спасибо за это. Можно ещё доработать, чтобы при нажатие на кнопку в самом блоке:
<button class="reject">{L_REJECT}</button>

блок полностью исчезал?
Dolphin
03.08.2018 05:31:46 pm
Удалить блок можно так:
document.getElementsByClassName('reject')[0].onclick = function() {
	document.getElementsByClassName('window_notice')[0].remove();
};