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

使用 jQuery 创建 DOM 元素

  • 772

我需要以一种不太混乱且易于维护的方式创建元素以进行更改。

目前我用这个代码.append()和.html()：

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

但它太混乱且难以维护，或者进行标签更改。

有没有其他方法可以使它更容易？

jquery

2 Answers

  1. Best Answer

    经过一段时间的调查，我发现了这种简单的方法，创建一个元素只需放置标签并用逗号分隔属性：

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

    类似于我想要实现的代码示例：

    $("<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. 这是我最近做的一个解决方案，是的！我知道这有点乏味，但有了括号和 emmet，一切都变得更容易了......

            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