Как манипулировать DOM, чтобы вкладывать элементы, используя Javascript?

Question

У меня есть тестовый проект, в котором я использую Firebase как способ визуализации данных на странице HTML. Это работает нормально, но мне нужно включить больше вложенных HTML (divs) с классами для поддержания моего макета. Можно ли сделать это? У меня есть следующее Javascript.

const productList = document.querySelector('#productList');

function renderProducts(doc) {
    let li = document.createElement('li');
    let divInner = document.createElement('div');
    let title = document.createElement('h2');

    li.setAttribute('data-id', doc.id);
    title.textContent = doc.data().title;

    li.appendChild(divInner);
    li.appendChild(title);

    div.setAttribute('class', 'inner');
    document.body.appendChild(div);

    productList.appendChild(li);
}

db.collection('Products').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
        renderProducts(doc);
    })
})

Однако, это приводит к следующему HTML, где явно ничего не вложено. * Обратите внимание, я удалил данные с целью объяснения.

<ul id="productsList">
    <li>
        <div class="inner"></div>
        <h2></h2>
    </li>
</ul>

Однако, мой желаемый результат - это каким-то образом манипулировать DOM, чтобы переместить <h2> внутрь <div>;

<ul id="productsList">
    <li>
        <div class="inner">
            <h2></h2>
        </div>
    </li>
</ul>

Answer 1

Похоже, вы добавляете его в неправильном месте. Пожалуйста, попробуйте это.

function renderProducts(doc) {
    let li = document.createElement('li');
    let divInner = document.createElement('div');
    let title = document.createElement('h2');

    li.setAttribute('data-id', doc.id);
    title.textContent = doc.data().title;

    divInner.appendChild(title);
    li.appendChild(divInner);

    div.setAttribute('class', 'inner');
    document.body.appendChild(div);

    productList.appendChild(li);
}