0

我已经从 JavaScript 数据生成了我的 Header。

要生成我正在迭代一个对象。

生成 HTML 如下所示：

for (const topic in templateTopic) {
  if (Object.prototype.hasOwnProperty.call(templateTopic, topic)) {
    const element = templateTopic[topic]
    // console.log(element);
    template += '<div class="col col-topic-element" id="' + element + '" onClick="filterTopic(' + element + ')">'
    template += '<p>' + element + '</p>'
    template += '</div>'
  }
}
parent.innerHTML = '';
parent.insertAdjacentHTML('afterbegin', template);

当我检查元素时，它包含以下奇怪的数据（Chrome Inspector 输出）：

<div id="topics" class="row">
  <div class="col col-topic-element" id="film" onclick="filterTopic(film)">
    <p>film</p>
  </div>
  <div class="col col-topic-element" id="photography" onclick="filterTopic(photography)">
    <p>photography</p>
  </div>
  <div class="col col-topic-element" id="visual design" onclick="filterTopic(visual design)" data-kwdiaostructure="&quot;0&quot;:&quot;input&quot;,&quot;1&quot;:&quot;submit@visual design@@col col-topic-element@@@@KwDiaoTagDIV&quot;,&quot;2&quot;:&quot;visual design&quot;"
    data-kwdiaohashid="input@submit@visual design@@col col-topic-element@@@@KwDiaoTagDIV@visual design">
    <p>visual design</p>
  </div>
</div>

我怎样才能摆脱数据，因为当我点击最后一个元素（“视觉设计”）时，控制台会抛出错误，我无法添加更多代码。

单击生成的 3 个项目后的控制台输出：

控制台输出

我集成了 Bootstrap 4 CDN 和 fontawesome。

4

0 回答 0