javascript - 在脚本标签之间使用 EJS

Question

我是 EJS 的新手，我希望在单击按钮时根据 EJS 呈现的数据动态创建 div 方面的帮助。在我的快递文件中：

res.render("user/profile.ejs", { posts: req.user.posts });
//posts is an array with elements having a similar structure to
/*"posts":[
    {
        "_id":{"$oid":"5cf9072b74cc8310803c89df"},
        "type":"Story",
        "subject/genre":"somethin",
        "content":"another thing",
        "date":{"$date":{"$numberLong":"1559824171334"}}
    }
]*/

在我的 ejs 文件中：

<div class="row">
    <div class="col">
        <div style="float: right">
            <button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="All" style="width: 60px">All</button>   
            <button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Idea" style="width: 60px">Ideas</button>    
            <button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Story" style="width: 60px">Stories</button>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
        $(".loadPosts-btn").click(function(){
            $(".posts-row").remove();
            if($(this).attr("id") === "All"){
                <% posts.forEach(elem=>{ %>
                    document.getElementsByClassName("container")[0].innerHTML += 
                        `<div class="row posts-row" style="border: 1px solid black">
                            <div class="col">
                                <div class="post-container m-4 p-3">
                                    <h2>${elem.type}</h2>
                                    <h4>${elem["subject/genre"]}</h4>
                                    <p>${elem.content}<p>
                                    <small>${elem.date}</small>
                                </div>
                            </div>
                        </div>`
                <% }) %>    
            };
        });
        $("#All").click();

    });
</script>

它显示一个错误：elem is not defined。我认为这是正常的，因为我没有elem通过render(). 简而言之，我想要的是在单击按钮时为数组<div class="row">中的每个帖子添加一个。我不知道我应该在标签中还是在无标签下这样做。postsid="All"<script><div class="row"><script>

先感谢您。

标签： javascripthtmlejs