javascript - 从 JavaScript 为每个元素创建 HTML

Question

我遇到了一个问题，我很确定解决它的唯一方法是使用 JavaScript。我不太擅长 JavaScript；这就是我请求您帮助的原因。

如何根据已编写的 HTML 代码将内容写入 div？

---

例子

由 JavaScript 基于“静态 HTML”创建的动态 HTML，带有一个名为 data-dynamic-content='yes' 的选择器

由 JavaScript 创建:

<ul>
   <li><a href="#a" class="hvr-bubble-right">Webpage settings</a></li>
   <li><a href="#b" class="hvr-bubble-right">Block 1</a></li>
   <li><a href="#c" class="hvr-bubble-right">Block 2</a></li>
</ul>

静态 HTML:

<div id="a" data-dynamic-content='yes' class='hidden' data-name='Webpage settings'>
   <!-- content -->
</div>

<div id="b" data-dynamic-content='yes' class='hidden' data-name='Block 1'>
   <!-- content -->
</div>

<div id="c" data-dynamic-content='yes' class='hidden' data-name='Block 2'>
   <!-- content -->
</div>

Answer 1

要根据在您提供的静态 HTML 中找到的 div 数量生成列表项，请使用 class = 'hidden' 遍历所有 div。

对于每个 div，您将一个列表项添加到一个新变量。然后将列表项添加到结果 div。

var html = "";
$('div.hidden').each(function(){
  html +=   "<li><a href='#" + $(this).attr('id') + "' class='hvr-bubble-right'>" + $(this).data('name') + "</a></li>";
});

$('#result').html("<ul>" + html + "</ul>");

<ul>
<li><a href="#a" class="hvr-bubble-right">Webpage settings</a></li>
<li><a href="#b" class="hvr-bubble-right">Block 1</a></li>
<li><a href="#c" class="hvr-bubble-right">Block 2</a></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" data-dynamic-content='yes' class='hidden' data-name='Webpage settings'> 
<!-- content --> 
</div> 
<div id="b" data-dynamic-content='yes' class='hidden' data-name='Block 1'> 
<!-- content --> 
</div> 
<div id="c" data-dynamic-content='yes' class='hidden' data-name='Block 2'> 
<!-- content --> 
</div>

<div id='result'></div>

我添加了一个结果 div 来显示生成的无序列表。