为了使用Java嵌套元素，如何操纵DOM？

Question

我有一个测试项目，我在其中使用Firebase作为在HTML页面上呈现数据的方式。它工作正常，但我需要在类中包含更多嵌套的HTML（div），以保持布局。是否有可能做到这一点？我有以下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);
}