从 JSON 个对象中渲染 HTML 个元素。如何渲染HTML？

Question

在追求知识的过程中终于在这里提交了我自己的一些问题感觉很好。我想知道是否有人可以帮助我解决以下问题。我有一个 jQuery GET，其中 JSON 对象通过 API.

拉取

我的代码：

var div = document.getElementById('myData');


jQuery(document).ready(function() {
  const Url = 'https://boards-api.greenhouse.io/v1/boards/sunrock/jobs/5104060003';
  jQuery('.btn').click(function() {
    jQuery.ajax({
      url: Url,
      type: 'GET',
      success: function(result) {
        console.log(result);
        x = result.title
        var jobTitle = x;
        document.getElementById('jobTitle').innerHTML = jobTitle;
        y = result.content
        var jobDescription = y;
        document.getElementById('jobDescription').innerHTML = jobDescription;
      },
      error: function(error) {
        console.log(`Error ${error}`)
      },

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class='btn'>
Clicke here for the GET request
</button>

<div id='jobTitle'>Job Title here</div>
<div id='jobDescription'>Job Description here</div>

我希望这些信息中的一些显示在 HTML 中。但是每当我使用 innerHTML 将带有信息的变量应用于 div 时，我得到以下信息：

Your role 

如您所见，HTML 元素被完全键入，这很奇怪。有谁知道如何解决这个问题？

我的代码在这里有一个 jsFiddle：https://jsfiddle.net/whimsicalcodingman/38a45udt/159/

Answer 1

正如@GrafiCode 所指出的，当您访问 content 属性时，问题不在您的代码中。问题出在您收到的有关 content 属性.

的信息中

属性contentreturns这个： "content": "Your role\nThe Project Finance...

即：

"content": "Your role\nThe Project Finance...

因此，我看到两个选项供您选择，您可以在后端修复此问题，也可以在前端修复此问题。

如果您想在前端修复此问题，那么您可能有兴趣使用 HTML 消毒剂。

例如，您可以 Mozilla's HTML Sanitizer API

如果你想在后端修复这个问题，你可以手动修复文本或者你可以尝试找到一个库。

比如你的后端是NodeJS，那么你可以使用这个包库sanitize-html

从 JSON 个对象中渲染 HTML 个元素。如何渲染HTML？

Rendering HTML elements from a JSON object get. How to render HTML?

javascript

jquery

json