用 JavaScript (jquery) 编写 HTML 代码答案

【问题标题】：Write HTML code with JavaScript (jquery)用 JavaScript (jquery) 编写 HTML 代码
【发布时间】：2016-05-05 08:46:42
【问题描述】：

我看到你可以用 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>

【问题讨论】：

标签： javascript jquery html append

【解决方案1】：

这是关于如何在javascript中显示html代码的答案

$( "#update" ).append( '您还有 5 个代币可用于此优惠券。您要更新未使用的代币吗？请选择您要更新的数量。”{{ csrf_field() }} 更新优惠券数量。恢复未使用的优惠券。关闭');

【讨论】：

【解决方案2】：

    <html>
<head>
    <title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {

        $('#btnAdd').click(function () {
            var szData = "";
            szData = '<blockquote class="col-sm-9">  <p class="lead">Lorem Ipsum</p>';
            szData = szData + '<footer>Lorem Ipsum <cite title="Source Title">Lorem Ipsum</cite>';
            szData = szData + '</footer></blockquote>';

            $('div').append(szData)
        });



    });


</script>
</head>
<body>
    <input type="button" value="Add Data" id="btnAdd"/>
  <div></div>
</body>
</html>

【讨论】：

【解决方案3】：

这是我通常的做法（简单易读），除非标记中有 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 );

【讨论】：