在 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;
这是我的问题的 fiddle 演示。 https://jsfiddle.net/uuqj4ad5/
如果您有帮助,我将不胜感激。
最佳答案
有一个拼写错误,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>
关于JavaScript:动态创建的类似 html 的字符串不会转换为 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41859266/