Write HTML code with JavaScript (jquery)

Question

I've seen that you can dynamically add HTML with jquery:

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

What would be the way to dynamically add somewhat more complicated 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

this is how I normally do it (simple and readable), unless there is an id in the markup

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

if you also want to assign unique id while appending it then

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