Create HTML from JavaScript for each element

Question

I've run into a problem and I'm pretty sure the only way to fix it requires JavaScript. I'm not that good at JavaScript; that is why I'm asking for your help.

How can I write content to a div based on HTML code that already has been written?

Example

Dynamic HTML created by JavaScript based on the 'Static HTML' with a selector called data-dynamic-content='yes'

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

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>

Do you want Unordered list inside the div or html document will be loaded when the links are clicked? — Yeou
– Yeou, Commented Sep 12, 2017 at 12:28
No, on $(document).ready i want to generate the Unordered list based on the Static HTML. — J Quest
– J Quest, Commented Sep 12, 2017 at 12:31

DenseCrab · Accepted Answer · 2017-09-12 12:38:01Z

2

To generate list items based on the amount of divs found in the static HTML you provided, loop over all the divs with class = 'hidden'.

For each of the divs you add a listitem to a new variable. Then add the list items to the result 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>

I've added a result div to show the generated unordered list.

edited Sep 12, 2017 at 12:38

answered Sep 12, 2017 at 12:30

DenseCrab

1,31311 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J Quest Over a year ago

Thank you, this was exactly what i was looking for! I'm only going to change the selector to: [data-dynamic-content="yes"]

Jessie Koffi · Accepted Answer · 2017-09-12 12:41:26Z

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/

Try googling and reading the jQuery documentation, it's really nice with examples and stuff, really helps getting started with this kind of stuff.

gavgrif · Accepted Answer · 2017-09-12 12:38:29Z

Iterate over the .hidden divs - grab their id and data-name and then append the li into the ul.

$(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>')
  })
})

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

Collectives™ on Stack Overflow

Create HTML from JavaScript for each element

Example

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related