Как создать вложенный элемент в JS?

Question

[weranda]

Приветствую
В JS не силен, хотелось бы понять как внутрь созданного элемента добавить еще один элемент.
Есть код создания одного элемента:

var myUl = document.createElement("ul");
myUl.classList.add("my-ul");

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

Answer 1

[Никита Егоров]

Советую прочитать здесь все, а если именно по вашей теме, то вот

var ul = document.createElement("ul"); ul.classList.add("ul");
var li = document.createElement('li'); li.innerHTML = 'Какой-то текст';

ul.appendChild(li)
document.body.appendChild(ul);

// Или же можно записать так, более удобный способ для добавления множества тегов.
document.body.innerHTML = `
<ul class='ul'>
    <li></li>
</ul>
`

Результат один и тот же. Вот живой пример

Comments

[weranda]

Спасибо, бегло уже читал, но не понял о вложенности элементов.
Т. е. сначала создаем элемент, потом добавляем его на страницу, потом создаем еще один элемент и добавляем его на страницу. Правильно?
Если правильно, то какой-то замкнутый круг получается. Можно ли создать все и сразу, а потом добавить все на страницу или только такой вариант?

[Никита Егоров]

weranda, обновите страницу. А так, если вам нужно создать более одного тега, то зачастую делают разметку в виде строки. И добавляют примерно так ->

const dom = `
  <div>
      <block>
          <block></block>
      </block>
      <block>
          <block></block>
          <block></block>
      </block>
      <block>
          <block></block>
          <block></block>
          <block></block>
      </block>
  </div>
	
`

document.body.innerHTML = dom

[weranda]

Никита Егоров, Спасибо за разъяснение. Теперь понял.