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

如何解决如何在javascript中追加孩子的孩子？

我有一个名为post的类的div，并且要遍历要显示在前端的来自后端的帖子列表。

我的要求是，我首先要创建一个空的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);

    }

2 个答案:

答案 0 :(得分：0)

您必须使用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);
});

答案 1 :(得分：0)

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

解决方法

您必须使用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);
});

,

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