Create elements in javascript dynamically

Question

How can i create an element like this in javascript dynamically because i want to loop it while it is fetching content in the database.

<div class="card">
<div class="card-image waves-effect waves-block waves-light">
 <img class="activator" src="images/office.jpg">
</div>
<div class="card-content">
 <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
 <p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
 <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
 <p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>

Here's what it looks like : http://materializecss.com/cards.html#reveal

I have tried searching in the internet and i only found creating one element dynamically with child. Please do help me this is my machine project and our professor doesn't even thought javascript and i am blindly studying this. I have managed to create some of the javascript such as functions. Iam sorry for the long post.

Answer 1

With jQuery:

For simplicity supouse only:

 <div class="card">
 <div class="card-image waves-effect waves-block waves-light">
 <img class="activator" src="images/office.jpg">
 </div>
 <p>other</p>
 </div>

try

 $('<div>').class('card').append(
 $('<div>').class('card-image waves-effect').append(
 $('<img>').class('activator').src('images/office.jpg'),
 $('<p>').text(other)
 )
 );

or with pure Javascript try:

var div=document.createElement('div');
div.className='card';
var div2=document.createElement('div');
div.appendChild(div2);
etc...

• Emilio Platzer: Your wellcome. Remember, never use html function like $('<p>').html(textVar) neither build a element within a string $('<p>'+textVar+</p>'). Those are danger. They allow code injection
• Rairulyle: You really help me alot! I am now trying to code all the element. Once i have reach the 15 reputation you will be upvoted. Thank you again :)

Answer 2

I have successfully converted the html elements to jquery thanks to @Emilio

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script>
 $(document).ready(function () {
 var card = $('<div>', { class: 'row' }).append($('<div>', { class: 'col s4' }).append($('<div>', { class: 'card' }).append(
 $('<div>', { class: 'card-image waves-effect waves-block waves-light' }).append(
 $('<img>', { class: 'activator', src: 'img/products/Xiaomi-Mi-4.jpg'})
 ), $('<div>', { class: 'card-content' }).append(
 $('<span>', { class: 'card-title activator grey-text text-darken-4', text: 'Card Title' }).append($('<i>', { class: 'material-icons right' }).text('more_vert'))
 , $('<p>').append($('<a>', { href: '#' }).text('This is Link'))
 ), $('<div>', { class: 'card-reveal' }).append($('<span>', { class: 'card-title activator grey-text text-darken-4', text: 'Card Title' }).append($('<i>', { class: 'material-icons right' }).text('close')), $('<p>').text('Here is some more information about this product that is only revealed once clicked on.'))
 )))
 $(document.body).append(card);
 });
</script>

• Emilio Platzer: To save future problems put the class keword inside quotes $('<div>', {"class": 'row'})... In next Javascript version ES6 class is a reserved keyword