如何在 javascript 中追加 child 的 child？

Question

我有一个 div 和一个名为 post 的 class，我正在遍历要在前端显示的后端帖子列表。

我的要求是我首先要创建一个空的 div 并将所有创建的元素附加到 div 中，然后最后将 div 推入

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);
}

如何在 javascript 中追加 child 的 child？

How to append child of child in javascript?

javascript

dom

appendchild