javascript - 使用 JavaScript (jquery) 编写 HTML 代码

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

如果您还想在 append 时分配唯一的 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 );