如何在javascript中附加孩子的孩子？

Question

我有一個名為post的類的 div，我正在遍歷后端的帖子列表，我想在前端顯示這些帖子。

我的要求是，我首先要創建一個空的 div 並將所有創建的元素附加到該 div 中，然后最后將該 div 推送到 <div class = 'post' 中。 但出於某種原因，它給了我一個錯誤，說appendChild is not a function 。 如果我可以僅通過 javascript 將這個空的 div 元素轉換為如下所示，那就太好了。 因為我想為我的每個帖子設置樣式，所以我將它們包裝在一個 div 中。

編輯：下面是我嘗試過的 javascript 代碼

    for (let i = 0; i < paginatedItems.length; i++) {
        let post_wrapper = document.createElement('div');
        let post_element = document.querySelector('.post');

        let hr = document.createElement('hr');
        // Title of the blog
        let title_element = document.createElement('h2')
        title_element.classList.add('mt-4');
        title_element.innerHTML = paginatedItems[i].title;
        post_element.appendChild(title_element);

        // Image of the Blog
        let image_element = document.createElement('img');
        image_element.classList.add('img-fluid');
        image_element.classList.add('rounded');
        image_element.style.width = '672'
        image_element.style.height = '372'
        image_element.src = paginatedItems[i].featured_image;
        post_element.appendChild(image_element);

        // Author Element
        let author_element = document.createElement('p');
        author_element.classList.add('lead');
        author_element.innerHTML = 'By ';
        let author_link = document.createElement('a')
        author_link.innerHTML = paginatedItems[i].author.name;
        author_link.href = 'google.com'

        author_element.appendChild(author_link);
        author_link.appendChild(hr);
        post_element.appendChild(author_element);

        // // Date Element
        let date_element = document.createElement('p');
        date_element.classList.add('item');
        date_element.innerHTML = `Posted ${timeSince(paginatedItems[i].date)} ago`;

        post_element.appendChild(date_element);
        date_element.appendChild(hr);

        // Description Element
        let description_element = document.createElement('p');
        description_element.classList.add('item');
        description_element.innerHTML = paginatedItems[i].content.substr(0, 300) + '....';
        post_element.appendChild(description_element);
        // Show more button
        let input_button = document.createElement('a')
        input_button.classList.add('btn-primary');
        input_button.classList.add('btn');
        input_button.textContent = "Show more..";
        input_button.addEventListener('click',
            function () {
                RenderPost(paginatedItems[i].ID);
            }
        )
        console.log(post_element);
        post_wrapper.appendChild(post_element);
        post_element.appendChild(input_button);

    }

Answer 1

你必須使用 forEach 方法。 這是一個例子：

const postsArray = [{title: 'miaw', id: 123324}, {title: 'hello', id: 983745}];


// the dom div you want to append to.
const myDiv = document.getElementById('[yourDivId]');


postsArray.forEach(post=>{
    // creating the post
    var div = document.createElement('div');
    var title = document.createElement('h1');
    var id = document.createElement('h4');
    title.textContent = post.title;
    id.textContent = post.id;
    // appending the elements to a div
    div.append(title, id);
    // then appending the post to your div
    myDiv.appendChild(div);
});

Answer 2

通過 id 獲取元素為我修復它是最終的工作代碼片段

    let post_element = document.querySelector('#posts');

    for (let i = 0; i < paginatedItems.length; i++) {
        let post_wrapper = document.createElement('div');

        let hr = document.createElement('hr');
        // Title of the blog
        let title_element = document.createElement('h2')
        title_element.classList.add('mt-4');
        title_element.innerHTML = paginatedItems[i].title;
        post_wrapper.appendChild(title_element);

        // Image of the Blog
        let image_element = document.createElement('img');
        image_element.classList.add('img-fluid');
        image_element.classList.add('rounded');
        image_element.style.width = '672'
        image_element.style.height = '372'
        image_element.src = paginatedItems[i].featured_image;
        post_wrapper.appendChild(image_element);
        post_element.appendChild(post_wrapper);
}