从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 =＆＃39; hidden＆＃39;循环遍历所有div。

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

＆＃13;

＆＃13;

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>");

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

HTML

<ul></ul>

<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>

JS

$("div[data-dynamic-content=yes]").each(function(i,el){
  var liEl = $("<li>");
  var aEl = $("<a>");
  aEl.attr("href","#"+$(el).attr("id"));
  aEl.addClass("hvr-bubble-right");
  aEl.text($(el).attr("data-name"));
  liEl.append(aEl);
  $("ul").append(liEl);
})

https://jsfiddle.net/hanalulu/q9o5uzmL/

尝试谷歌搜索并阅读jQuery documentation，它的例子和内容非常好，真的有助于开始使用这类内容。

Answer 3

迭代.hidden divs - 获取他们的id和数据名称，然后将li附加到ul中。

＆＃13;

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="targetList"></ul>
Static 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>

＆＃13;

＆＃13;

＆＃13;