如何使用jquery创建div结构

Question

任何人都可以告诉如何使用jquery链接和最少的代码行来创建下面的div结构。

<div class="pane">
  <h3>Test</h3>
  <p><span class="logo">test</span> 3 mi</p>
  <p class="stores-desc">Testing</p>
  <p class="stores-timing"><strong> Test &nbsp;</strong> 0:00 am - 0:00 pm &nbsp;<strong>tst</strong> 0:00 pm &nbsp;<strong> tstnbsp;</strong> 0:00 am - 0:00 pm</p>
  <div class="store-checkin">Click here</div>
</div>

Answer 1

使用更少的代码可以更好，更快地完成此操作。这特别看起来像是使用基于模板的解决方案最好解决的问题。但是，如果您想使用jQuery流畅的语法来构造该片段，那么这是一种方法。

＆＃13;

＆＃13;

var myHtml = $("<div/>")
    .addClass("pane")
    .append( $("<h3/>").text("Test") )
    .append(
      $("<p/>")
        .append( $("<span />").addClass("logo").text("test") )
        .append( " 3 mi" )
    )
    .append( $("<p/>").addClass("stores-desc").text("Testing") )
    .append(
      $("<p/>").addClass("stores-timing")
        .append( $("<strong />").html(" Test &nbsp;") )
        .append( "0:00 am - 0:00 pm &nbsp;" )
        .append( $("<strong />").text("tst") )
        .append( " 0:00 pm &nbsp;" )
        .append( $("<strong />").text("tst") )
        .append( " 0:00 am - 0:00 pm" )
    )
    .append( $("<div/>").addClass("store-checkin").text("Click here") );

$("body").append(myHtml);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;