Home / Questions / 40754
Accepted
JuankGlezz
Asked: 2020-12-24 08:35:56 +0800 CST 2020-12-24 08:35:56 +0800 CST

Create DOM elements with jQuery

  • 772

I need to create elements in a way that is not too 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 tag changes.

Is there any other way to make it easier?

jquery

2 Answers

  1. Best Answer

    Investigating after a while I found this simple way, to create an element just put the label and separate the attributes with a comma:

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

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

    Referencia

    • 9

  2. This is a solution I did recently, yes! I know it's a bit tedious but with Brackets and emmet everything is made easier...

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