在不使用 innerHTML 的情况下将数据添加到 div答案

【问题标题】：Add data to div without using innerHTML在不使用 innerHTML 的情况下将数据添加到 div
【发布时间】：2020-10-15 04:46:03
【问题描述】：

我有一个可以获取 JSON 数据并将其添加到 HTML 元素 div 的工作代码。我正在使用 innerHTML 添加数据。由于使用 innerHTML 是一种不好的做法，我正在寻找有关在不使用 innerHTML 的情况下将 JSON 数据添加到任何 HTML 元素的最佳做法的建议？提前致谢。

const API_URL = "http://localhost:3000/api/posts";
const API_BASE_URL = "http://localhost:3000/";

window.onload = () => {
    getPosts();
}

const getPosts = () => {
    fetch(API_URL, {
        method: 'GET'
    }).then((response) => {
        return response.json();
    }).then((data) => {
        buildPosts(data);
    })
}

const buildPosts = (blogPosts) => {
    let blogPostsContent = "";
    for(blogPost of blogPosts){
        const postDate = new Date(parseInt(blogPost.added_date)).toDateString();
        blogPostsContent += `
        <div class="post">
            <div class="post-image"> </div>
            <div class="post-content"> 
                <div class="post-date">${postDate}</div>
                <div class="post-title"><h4>${blogPost.title}</h4></div>
                <div class="post-text">${blogPost.content}</div> 
            </div>
        </div>`
    }

    document.querySelector('.blog-posts').innerHTML = blogPostsContent;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>My Blog</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style/style.css">
    </head>
    <body>
        <div class="add-post">
            <a href="new-post.html">
                <div class="nav-button new-post-button">+</div>
            </a>
        </div>
        <header>
            <div class="profile-image"></div>
            <div class="profile-name">Puja Patel</div>
            <div class="subtext">Welcome to my blog!</div>
        </header>
        <div class="main">
            <div class="main-container blog-posts">
                <div class="post">
                    <div class="post-image"> </div>
                    <div class="post-content"> 
                        <div class="post-date">Mar 10</div>
                        <div class="post-title"><h4>This is my title</h4></div>
                        <div class="post-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</div> 
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p>Made with love!!</p>
        </footer>
        <script src="js/index.js"></script>
    </body>
</html>

【问题讨论】：

您可以使用 insertAdjacentHTML。请参阅：developer.mozilla.org/en-US/docs/Web/API/Element/…。

标签： javascript html

【解决方案1】：

单独使用.innerHTML 还不错，但是将.innerHTML 与任意外部输入（例如来自API 或来自用户）一起使用是个坏主意，因为它可以让您执行任意代码。它还可能导致在文档中创建意外元素，如果插入的内容恰好具有 HTML 标记，则会出现奇怪的显示问题。

在您的情况下，要修复它，您可以将innerHTML 设置为<div class="post" 的HTML 标记，并将postDate、title 和content 插入到@987654329 @ 之后的子 div：

const buildPosts = (blogPosts) => {
    const postsContainer = document.querySelector('.blog-posts')
    for(const blogPost of blogPosts){
        const postDate = new Date(parseInt(blogPost.added_date)).toDateString();
        const newPost = postsContainer.appendChild(document.createElement('div'));
        newPost.className = 'post';
        newPost.innerHTML = `
            <div class="post-image"> </div>
            <div class="post-content"> 
                <div class="post-date"></div>
                <div class="post-title"><h4></h4></div>
                <div class="post-text"></div> 
            </div>`;
        const contentDivs = newPost.querySelector('.post-content').children;
        contentDivs[0].textContent = postDate;
        contentDivs[1].children[0].textContent = blogPost.title;
        contentDivs[2].textContent = blogPost.content;
    }
}

如果来自 API 的数据始终完全值得信赖，那么使用 innerHTML 就可以了。

如果数据包含需要插入但不一定值得信赖的 HTML 标记，您需要sanitize it 以确保没有意外脚本运行。如果清理得当，使用innerHTML 是可以的。

【讨论】：

非常感谢您如此深入的解释。这就是我一直在寻找的答案。