I need to create elements in a way that is not very confusing and easy to maintain to make a change.
Currently I do it with this code with .append() and .html() :
$('.Selector').append(
'<div class="dropdown">'+
'<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">'+
'<li><a href="#">Elemento Menu 1</a></li>'
'</ul>'+
'</div>'
)
But it's too confusing and difficult to maintain, or make label changes.
Is there any other way to make it easier?
Investigating after a while I found this simple way, to create an element just enough to put the label and separate with a comma the attributes:
$('<a/>', {
'html' : 'Un <strong>nuevo</strong> enlace',
'class' : 'new',
'href' : 'foo.html'
});
Example of code similar to what I wanted to achieve:
$("<div>", {
'class': 'dropdown'
}).append(
$('<ul>', {
'class': 'dropdown-menu',
'aria-labelledby': 'dropdownMenu1'
}).append(
$('<li>')
.append(
$('<a>',{
'href':'#',
'text':'Hola Mundo'
})
)
)
).hide().appendTo('#otraDiv').fadeIn('slow');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='otraDiv'></div>This is a solution I did recently, yes! I know it's a bit tedious but with Brackets and emmet everything is facilitated ...
var icon = "./assets/icons/headset.png";
var cadena = '';
cadena += " <div class='cd-timeline-block'>";
cadena += " <div class='cd-timeline-img'>";
cadena += " <img src='"+icon+"' alt='user-picture'>";
cadena += " </div>";
cadena += " <div class='cd-timeline-content'>";
cadena += " <h4 class='text-center text-titles'>1 - YecidMoreno (Escritor)</h4>";
cadena += " <p class='text-center'>";
cadena += " <i class='zmdi zmdi-star zmdi-hc-fw'></i>";
cadena += " <i class='zmdi zmdi-star zmdi-hc-fw'></i>";
cadena += " <i class='zmdi zmdi-star zmdi-hc-fw'></i>";
cadena += " <i class='zmdi zmdi-star zmdi-hc-fw'></i>";
cadena += " <i class='zmdi zmdi-star-half zmdi-hc-fw'></i>";
cadena += " <a href='perfil.html' class='link-perfil'>Visitar Perfil</a>";
cadena += " </p>";
cadena += " <span class='cd-date'><i class='zmdi zmdi-calendar-note zmdi-hc-fw'></i> 07/07/2017</span>";
cadena += " </div>";
cadena += " </div> ";
div1 = $(cadena);
$("#cd-timeline").prepend(div1);