6

Necesito crear elementos de una manera que no sea muy confusa y fácil de darle mantenimiento para hacer un cambio.

Actualmente lo hago con este código con .append() y .html():

$('.Selector').append(
  '<div class="dropdown">'+
    '<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">'+
      '<li><a href="#">Elemento Menu 1</a></li>'
    '</ul>'+
  '</div>'
)

Pero es demasiado confuso y difícil de darle mantenimiento, o hacer cambios de etiquetas.

¿Hay alguna otra manera de hacerlo mas fácil?

2 respuestas 2

9

Investigando después de un rato encontré esta manera simple, para crear un elemento solo basta con poner la etiqueta y separar con una coma los atributos:

$('<a/>', {
  'html' : 'Un <strong>nuevo</strong> enlace',
  'class' : 'new',
  'href' : 'foo.html'
});

Ejemplo de código similar a lo que queria lograr:

$("<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>

Referencia

0

esta es una solucion que hice hace poco, si! lo sé es un poco tediosa pero con Brackets y emmet se facilita todo...

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.