JavaScript：动态创建的类似 html 的字符串不会转换为 html答案

【问题标题】：JavaScript: Dynamically created html-like string won't tun into htmlJavaScript：动态创建的类似 html 的字符串不会转换为 html
【发布时间】：2017-06-11 02:04:24
【问题描述】：

在 DOM 中我已经有了一个包装器

<div id="wrapper"></div>

我需要用一堆 div 来填充，每个 div 都代表新的类别。然后，每个类别将填满代表该类别项目的各种卡片。像这样：

<div id="wrapper">
  <div data-category="puppy">
    Dynamically created category wrapper
    <div class="puppy1">...</div>
    <div class="puppy2">...</div>
  </div>
  <div data-category="cat">
    ...
  </div>
</div>

我使用以下代码来创建和填充类别，但我总是最终要么有空类别，要么在代表 html 的内部有一个字符串。

var categoryWrapper = document.createElement("div");
categoryWrapper.setAttribute("data-category", key);
categoryWrapper.innerHtml = htmlString;

这是我的问题的小提琴演示。 https://jsfiddle.net/uuqj4ad5/

我将不胜感激。

【问题讨论】：

标签： javascript jquery dynamic innerhtml createelement

【解决方案1】：

有一个错字，innerHml 应该是innerHTML(Javascript object properties are case sensitive) 否则它只是添加一个额外的属性，什么都没有发生。

categoryWrapper.innerHTML = htmlString;

var htmlString = "<div class='card'><div class='cardImg'><img src='http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg' alt='Puppy'></div><div class='cardContent'><div class='cardInfo'><p>Puppy Yawning</p></div><div class='cardDesc'><p>Awww!</p></div></div></div>";

var outerWrapper = $("#wrapper");
var categoryWrapper = document.createElement("div");
categoryWrapper.innerHTML = htmlString;
outerWrapper.append(categoryWrapper);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>
    Under this title various categories should be dynamically created
  </h3>
  <div id="wrapper">outerWrapper waiting for dynamic data...</div>
</div>

仅供参考：如果要删除现有内容，请使用html() 方法而不是append() 方法。

【讨论】：

【解决方案2】：

innerHtml

应该是

innerHTML

Javascript 区分大小写

如果您使用jQuery，为什么要混合使用 jQuery 和 Vanilla JS。

var outerWrapper = $("#wrapper");

// I created new categoryWrapper object
var categoryWrapper = $('<div/>', {
                          html: htmlString
                       });
debugger;
// WHen I have the category filled with inner data, I will append it into outerwrapper
outerWrapper.append(categoryWrapper);

jsFiddle

【讨论】：

【解决方案3】：

检查我的小提琴：- https://jsfiddle.net/dhruv1992/1xg18a3f/1/

你的 js 代码应该是这样的

// This is dynamically filled html template. The data comes from some JSON.
var htmlString = "<div class='card'><div class='cardImg'><img src='http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg' alt='Puppy'></div><div class='cardContent'><div class='cardInfo'><p>Puppy Yawning</p></div><div class='cardDesc'><p>Awww!</p></div></div></div>";

// This outer wrapper will in the end contain few categories
var outerWrapper = $("#wrapper");

outerWrapper.append('<div>'+htmlString+'</div>')

【讨论】：