javascript - json 和 JavaScript 替换 html h1 标题？

Question

当我重新加载浏览器以显示一些 json 数据时，JavaScript 代码不断替换我的 HTML 代码？我该如何纠正这个问题？

JavaScript 代码:

$.getJSON('https://jsonplaceholder.typicode.com/posts/1', function, data)  {
      document.write(data.title);
};

HTML 代码:

<div class="container">
    <div id="json_example">
    <h1>json Example</h1>
   </div>
</div>

Answer 1

不要使用document.write()，因为它会用新内容替换完全构建的 HTML 文档。 document.write() 只应在构建页面时用于构建动态页面。

相反，只需使用 data.title, 填充一些预先存在的元素，

如:

$.getJSON('https://jsonplaceholder.typicode.com/posts/1', function, data)  {
      $("#output").text(data.title);
};

<div class="container">
    <div id="json_example">
    <h1>json Example</h1>
    <span id="output"></span>
   </div>
</div>