如何使用哈巴狗在 JS 中插入 html 标签？

Question

当我需要在 JS 中使用一个类似 JSON 的对象时，每个块中都有不同的数据并遍历该对象，我通过哈巴狗制作了一个 HTML 代码。

我用代码描述一下

var footerMenu = {
   left: {
      title: "sometitle",
      list: [
         {
         title: "First thing to do",
         text:  "wake up and brush some teeth"
         },

         {
         title: "Second thing to do",
         text:   "start coding"
         },
(...)

当带有属性 footerMenu.left[0].text 的文本必须使用一些标签设置样式时就会出现问题。

我需要这样的东西

...... text: "wake up and #[span.color-red brush] some teeth"

但是，哈巴狗当然将其视为简单的字符串。

我不想手动编写每个块，我如何保存相同的代码结构，但将随机标签应用到我的 JSON-带有哈巴狗的对象中？

Answer 1

您可以像往常一样编写 html 标签：

text: "wake up and <span class='color-red brush'>some teeth</span>"

然后在 pug 中你可以像这样使用 unescaped attributes:

.some-class!=footerMenu.left[0].text

或使用string interpolation attributes unescaped

.some-class !{footerMenu.left[0].text}

如何使用哈巴狗在 JS 中插入 html 标签？

How do I insert html tags in JS with pug?

javascript

json

pug

html-preprocessor