从 JSON 键使用 css class/id

Question

我是 JSON 的新手，我正在使用的 json 文件的某些键中有 HTML 元素。这是我尝试提取的数组中的数据示例。

"com" : "<p class=\"body-line ltr \"><span class=\"heading\">HEADING</span></p><p class=\"body-line ltr \">BODY</p>"

正如预期的那样，当它被拉到页面上时它只是显示为文本：

"<p class="body-line ltr "><span class="heading">HEADING</span></p><p class="body-line ltr ">BODY</p>"

如何从文本中删除 HTML 元素并在我自己的网页中使用它们？请记住，我实际上无法编辑 json 文件。

我正在使用 vue 和 vue 资源。

Answer 1

现在我知道你在问什么了--

You need to actually add the element to the DOM in order for it to show up as HTML on your page; until then, it is just a string.

有很多方法可以做到这一点，例如jQuery .append() if you use jQuery, or document.appendChild()如果你有一个对象并且想使用plain old JavaScript，或者你可以还使用 JavaScript 设置元素的 innerHTML 以包含新内容。

我将在这里提供一个示例，使用 Div.

的普通 JS 和 innerHTML

你从看起来像这样的地方得到 json：

json = { "com" : "some HTML in here" }

您可能在页面上有一些 div 像这样的容器：

<div id="container"></div>

然后，无论你的JavaScript在哪里，你都可以设置容器的innerHTML：

var containerDiv = document.getElementById("container")
containerDiv.innerHTML = json["com"]

这应该会给你足够的方向来推动它。

这是我在 jsFiddle 中工作的小例子： https://jsfiddle.net/16pcayjq/

从 JSON 键使用 css class/id

Use css class/id from JSON key

javascript

json

get

vue.js

vue-resource