мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Метод appendChild

Метод appendChild позволяет вставить в конец какого-либо другой элемент. Чаще всего используется после создания элемента с помощью createElement.

Синтаксис

родитель.appendChild(элемент)

Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока #parent:

<div id="parent"> <p>1</p> <p>2</p> <p>3</p> </div> let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.innerHTML = '!'; parent.appendChild(p);

Результат выполнения кода:

<div id="parent"> <p>1</p> <p>2</p> <p>3</p> <p>!</p> </div>

Пример

Дан ul. Давайте разместим в нем 9 тегов li, при этом их текстом сделаем порядковые номера:

<ul id="parent"></ul> let parent = document.querySelector('#parent'); for (let i = 1; i <= 9; i++) { let li = document.createElement('li'); li.innerHTML = i; parent.appendChild(li); }

Результат выполнения кода:

<ul id="parent"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>

Пример

Давайте заполним таблицу tr-ками и td-шками:

<table id="table"></table> let parent = document.querySelector('#parent'); for (let i = 1; i <= 3; i++) { let tr = document.createElement('tr'); // создаем tr-ку // Заполняем tr-ку td-шками: for (let j = 1; j <= 3; j++) { let td = document.createElement('td'); // создаем td-шку td.innerHTML = j; // пишем в нее текст tr.appendChild(td); // добавляем созданную td-шку в конец tr-ки } table.appendChild(tr); // добавляем созданную tr-ку в конец таблицы }

Результат выполнения кода:

<table id="table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Смотрите также

  • метод append,
    который вставляет элементы в конец
  • метод insertBefore,
    который вставляет элемент в перед элементом
  • метод insertAdjacentElement,
    который вставляет элемент в заданное место
  • метод insertAdjacentHTML,
    который вставляет теги в заданное место