logo标签列表

使用JavaScript（jQuery）编写HTML代码

javascriptjqueryhtmlappend
4

我看到你可以使用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>
2
根据使用情况，有许多方法可以实现。可以克隆现有的代码，可以使用模板脚本，可以使用字符串，可以将HTML放在脚本标签中并从那里提取它，也可以从服务器使用AJAX。你想要做什么？ - charlietfl
HTML 是否复杂并不重要吧？你能否简单地使用类名来添加任何 HTML 呢？ - Amar Singh
1
如果我们将您的HTML放在隐藏的div中，并检索您的HTML作为 var Your_HTML=$(".ur_hidden_div_class").html();，然后将其附加在任何地方。 - Amar Singh
3个回答
8
这是我通常的做法（简单易读），除非标记中有一个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 );
0
    <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>
0

这是有关如何在Javascript中显示HTML代码的答案

$( "#update" ).append( '您的优惠券剩余5个代币。是否要更新未使用的代币？请选择您想要更新的数量。{{ csrf_field() }} 更新优惠券数量。恢复未使用的优惠券。关闭');

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接