编写HTML代码

我已经看到了你可以动态地添加HTML使用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>

来源

2016-01-28 Diego

取决于使用情况...很多方法可以做到这一点分配唯一的ID。可以克隆现有的。可以使用模板脚本。可以使用字符串。可以将HTML放在脚本标记中并从中拉出。可以从服务器使用ajax。你想做什么？ – charlietfl

如果html很复杂会影响吗？你不能简单地使用类名追加任何html –

我的意思是如果我们把你的html放在隐藏的div中，并检索你的html为'var Your_HTML = $（“。ur_hidden_div_class”）。html（）;'然后追加它 –

这就是我通常做它（简单，可读的），除非有在标记

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我f也希望在其追加然后

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

来源

2016-01-28 05:43:51 gurvinder372

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

来源

2016-01-28 06:13:59 Aswathy

回答

相关问题