Crear elementos del DOM con jQuery

publicado por: Anonymous

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?

solución

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:

_x000D_

_x000D_

$("<div>", {_x000D_
    'class': 'dropdown'_x000D_
}).append(_x000D_
    $('<ul>', {_x000D_
        'class': 'dropdown-menu',_x000D_
        'aria-labelledby': 'dropdownMenu1'_x000D_
    }).append(_x000D_
      $('<li>')_x000D_
        .append(_x000D_
          $('<a>',{_x000D_
            'href':'#',_x000D_
            'text':'Hola Mundo'_x000D_
          })_x000D_
        )_x000D_
    )_x000D_
).hide().appendTo('#otraDiv').fadeIn('slow');

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id='otraDiv'></div>

_x000D_

_x000D_

_x000D_

Referencia

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *