Question

我正在创建一个网站，该网站从不同的网站上抓取数据，并通过呈现文本文件数据将其显示在我的网站上。

我知道如何在React中做到这一点（请参见下面的代码），但是我想使用简单的JavaScript在HTML中做到这一点。请建议我该怎么办？

renderComments({comments}){
    if(comments != null){
        const commentList=comments.map((comment)=>{
            return(
                <li key={comment.id}>
                   <p> {comment.detail}</p>
                   <p>--{comment.author}</p>
                </li>
            );
        });

        return(
            <div className="col-12 col-md-5 m-1">
                <h4>Comments</h4>
                <ul className='list-unstyled'>
                    {commentList}
                </ul>
            </div>
        );
    }
}

Answer 1

您可以使用document.createElement(tagName[, options]);

for (var i = 0; i < comments.length; i++) {
    var comments = comments[i];
    var ul = document.getElementsByClassName("list-unstyled")[0];
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(comments));
    ul.appendChild(li);
}

<ul className='list-unstyled'></ul>

还可以使用appendChild

for (var i = 0; i < comments.length; i++) {
    var comments = comments[i];
    var li = document.createElement('li');
    li.innerHTML = comments;  
    document.getElementsByClassName("list-unstyled")[0].appendChild(li);
}

Answer 2

这里是Vanilla JS等效项，除了子元素的内容，我留给您使用与我相同的方法来完成这些子元素：

function renderComments(comments) {
  if (comments != null) {
    let ans = document.createElement('div');
    ans.classList.add('col-12', 'col-md-5', 'm-1');

    let h4Node = document.createElement('h4');
    h4Node.innerText = 'Comments';
    ans.appendChild(h4Node);

    let ulNode = document.createElement('ul');
    ulNode.classList.add('list-unstyled');

    for (let i = 0; i < comments.length; i++) {
      let comment = comments[i];

      let currNode = document.createElement('li');
      currNode.setAttribute('key', comment.id);

      // Here add the additional two <p> elements

      ulNode.appendChild(currNode);
    }

    ans.appendChild(ulNode);
    return ans;
  }
}

let example = [{id: 1}, {id: 2}];

document.body.appendChild(renderComments(example));

其核心是createElement和appendChild，它们分别创建一个HTML节点并添加一个元素作为子元素。

如何显示文本文件中的项目列表？

2 个答案: