javascript - 如何使用 DOM2 方法在 Javascript 中格式化 JSON？

Question

我正在尝试为我的网站建立一个实时评论系统(博客页面作业)。这个想法是使用 ajax 将评论存储在 mysql 数据库中，并返回评论的 JSON 文本而无需刷新。我已经完成了 90%，只是不知道如何格式化 JSON 文本，使其看起来不那么糟糕。

评论返回的 JSON 如下:

[{"c_name":"Test Commenter","c_date":"2014-08-14","comment":"This is a test comment"}]

在我的评论页面(postdetails.php)上，我首先查询评论数据库表并返回已为特定帖子存储的所有评论。然后，用户可以输入评论表单 > 提交 >，ajax 函数返回的 JSON 文本将自动显示在页面上。

已存储在表中的初始评论通过 php 函数显示:

// Display comments in nice format 
          while ($row2 = mysql_fetch_array($result2))
          {
              echo "<div class = 'comments_user'>\n"; 
                  echo "<p>" . $row2['c_name'] ."</p>\n";
              echo "</div>\n"; 
              echo "<p class = 'date'>" . $row2['c_date'] . "</p>"; 
              echo "<p>" . $row2['comment'] ."</p>\n"; 
          }

我的问题是让 JSON 文本以类似的格式显示在之前的评论下方。我有普通的旧 HTML 来显示 JSON 返回的注释。我应该能够通过定位 p 标签 id 来操作 DOM，如下所示:

    <!--Use JS and the DOM to manipulate this (live commenting)-->
        <div class = "comments_user">
            <p id = "commenter"></p>
        </div>
        <div class = "date_wrap">
            <p id = "c_date"></p>
        </div>
            <p id = "comment_content"></p>
        <hr/>
        </div>

JSON 文本在“结果”变量中返回。这将传递给我的 JSON_to_HTML 函数:

function JSON_to_HTML(result){
    var CM = JSON.parse(result);        

   // Need to traverse the DOM and display the array contents (JSON)
} 

我的问题是如何使用 DOM 将这些注释添加到上面显示的纯 HTML 代码中？我知道我可以使用 document.getElementById("c_date"); 获取 p-tag 值等等，但我怎样才能将 child 附加到这些上面呢？我熟悉 Jquery 附加方法，但为此我只能使用普通的 Javascript。

我尝试过的一件事是使用一个全局变量来跟踪 ajax 函数被调用的次数(每个 session 的评论数)。对于每条评论，我可以遍历 DOM 并将一个子项附加到评论者、日期和评论页面。然而我没能让它完全正常工作。

我最后的手段是将 JSON 返回到一个简单的表中(我知道该怎么做)。

这里有什么想法吗？谢谢!

Answer 1

如果你已经有了 html 结构，你可以这样做:

document.getElementById("c_date").textContent = CM[0].c_date;
// etc.

如果您想添加 html 而不是纯文本，可以使用 innerHTML 代替。