用JavaScript编写HTML代码(jquery)

Question

我已经看到你可以使用jquery动态添加HTML:

$( "div" ).append( "<p>Test</p>" );

什么是动态添加更复杂的HTML的方法:

<blockquote class="col-sm-9">
  <p class="lead">Lorem Ipsum</p>
  <footer>Lorem Ipsum <cite title="Source Title">Lorem Ipsum</cite></footer>
</blockquote>

Answer 1

这是我通常的做法(简单和可读),除非标记中有id

var html = '<blockquote class="col-sm-9">';
html += '<p class="lead">Lorem Ipsum</p>';
html += '<footer>Lorem Ipsum <cite title="Source Title">Lorem Ipsum</cite></footer>';
html += '</blockquote>'

$( "div" ).append( html );

如果您还想在附加时分配唯一ID

var blockQuoteCounter = 0;
var html = '<blockquote class="col-sm-9" id="blockQuote_' + blockQuoteCounter + '">';
html += '<p class="lead">Lorem Ipsum</p>';
html += '<footer>Lorem Ipsum <cite title="Source Title">Lorem Ipsum</cite></footer>';
html += '</blockquote>'

$( "div" ).append( html );