如何把<div> and</div>之前和之後的內容使用append（）？

Question

所以我想要做的是通過追加第一個，然後是內容添加一個外部div容器，然後追加最後一個。但結果似乎是，我在開始時添加自動插入一個。結果在兩個單獨的div。

有人嗎？謝謝！

//adds the outer div tag here... 
$('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')') 
    .append("<div id='outer' style='height:15px'>"); 

//adds the inner content here... 
for (l = 0; l < rssArray.length; l++) { 

if (eleArray[l][19] == curNumMonth 
    && eleArray[l][20] == curNumDay 
    && eleArray[l][21] == curNumYear) { 

    $('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')') 
     .append("</br><div style='height:auto'><b>" 
       + eleArray[l][8] 
       + "</b></br><a href='" 
       + eleArray[l][0] 
       + "' target='_blank'>" 
       + eleArray[l][1] 
       + "</a></div>"); 
} 

//adds the outer div closing tag here... 
$('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')').append("</div>");​ 

Answer 1

先創建DIV對象，將內容添加到它，然後將DIV附加到您的#aspcal表。像這樣：

//Create the DIV...  
    var myDiv = $("<div id='outer' style='height:15px'></div>"); 

    //add the inner content...  
    for (l = 0; l < rssArray.length; l++) 
     if (eleArray[l][19] == curNumMonth && eleArray[l][20] == curNumDay && eleArray[l][21] == curNumYear) { 
      myDiv.append("</br><div style='height:auto'><b>" + eleArray[l][8] + "</b></br><a href='" + eleArray[l][0] + "' target='_blank'>" + eleArray[l][1] + "</a></div>"); 
     } 
    //add the div here... 
    $('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')').append(myDiv); 

Answer 2

您不是用jQuery創建標籤，而是創建DOM對象。 A div由打開和關閉標記以及屬性等表示，但是由瀏覽器解析並存儲爲數據樹中的對象。 jQuery和最終的javascript，只是告訴瀏覽器在樹中創建一個新的對象。

你應該創建你的外部div，然後將內容添加到它。 jQuery會爲你做很多事情。

//adds the outer div tag here... 
$('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')').append("<div id='outer' style='height:15px'>"); 


//adds the inner content here... 
for (l = 0; l < rssArray.length; l++) { 
    if (eleArray[l][19] == curNumMonth && eleArray[l][20] == curNumDay && eleArray[l][21] == curNumYear) { 
     $('#outer').append("</br><div style='height:auto'><b>" + eleArray[l][8] + "</b></br><a href='" + eleArray[l][0] + "' target='_blank'>" + eleArray[l][1] + "</a></div>"); 
} 

我只引用#outer在選擇器，因爲作爲ID，它應該是唯一的。如果不是，將其更改爲一個類和做到這一點：

//adds the outer div tag here... 
var aspcal = $('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')'); 
aspcal.append("<div class='outer' style='height:15px'>"); 


//adds the inner content here... 
for (l = 0; l < rssArray.length; l++) { 
    if (eleArray[l][19] == curNumMonth && eleArray[l][20] == curNumDay && eleArray[l][21] == curNumYear) { 
     aspcal.find('.outer').append("</br><div style='height:auto'><b>" + eleArray[l][8] + "</b></br><a href='" + eleArray[l][0] + "' target='_blank'>" + eleArray[l][1] + "</a></div>"); 
} 

如果您已經創建的內容，你可以使用.wrap('<div>')圍繞您的內容添加一個div（或任何其他家長能夠目標）。

Answer 3

這就是append API的工作原理。我會將你的內容作爲一個變量，然後它變成$(targetselector).append('<div>' + variable + '</div>')。也可以使用.html()這將有相同的結果。

主要的區別在於，不是按照當前的方式添加所有內容，而只是將字符串連接起來。

既然你連接字符串，該div的可能只是其中的一部分，甚至，然後你只.html(variable)

Answer 4

簡短的回答，因爲這是jQuery的高達作品...... 您是否嘗試過創建空的div，然後追加到該div？

var theDiv = $("<div id='outer' style='height:15px'>"); 
for (l = 0; l < rssArray.length; l++) { 
    if (eleArray[l][19] == curNumMonth && eleArray[l][20] == curNumDay && eleArray[l][21] == curNumYear) { 
     theDiv.append("<br /><div style='height:auto'><b>" + eleArray[l][8] + "</b></br><a href='" + eleArray[l][0] + "' target='_blank'>" + eleArray[l][1] + "</a></div>"); 
    } 
$('#aspcal tr:eq(' + loopweek + ') td:eq(' + loopday + ')').append(theDiv);