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

回答

相關問題