Onclick事件動態構建並將div附加到現有的div（jquery或其他任何東西歡迎）

我有以下格式的div。 1.如何將其添加到現有的div。我是否創建一個單獨的html文件，然後使用jquery添加它？或者我應該將其附加到一個var，然後將其附加到div。請提出一個方法，以1個追加和創建DIV，然後又DIV（其ID我知道）Onclick事件動態構建並將div附加到現有的div（jquery或其他任何東西歡迎）

<div> 
    <table> 
    <tr><td></td><td></td><td></td> 
    </tr> 
    </table> 
    <table> 
    <tr><td></td><td></td> 
    </tr> 
    <tr><td></td><td></td><td></td><td></td> 
    </tr> 
    </table> 
    <table> 
    <tr><td></td> 
    </tr> 
    </table> 
</div>

來源

2012-07-18 Haran Murthy

你可以把它做成一個字符串然後追加。但它看起來好像有某種重複的模式，這讓我懷疑（儘管不能完全確定）您可以爲這些類型的div創建工廠，而是一次添加一個組件，或者最終只使用一個大的組件字符串像最初的想法（但建立在某種迭代器內）。由於我實際上並沒有提供確切的答案或代碼，因此留作評論。 ;-) – 2012-07-18 05:15:24

格雷格對不起，我是js的新手。你能詳細說明還是指導我加入字符串追加部分的鏈接。這個html看起來是重複的，但事實上並非如此。我提到輸入行的地方可能有可變的td標籤。 – 2012-07-18 13:31:57

感謝greg編輯 – 2012-07-18 13:42:42

你可以嘗試這樣的事情（使用jQuery）內追加它：

HTML：

<div id="content" style="display: none;"> 
    <div> 
    <table> 
     <tr>text here and then some input tag 
     </tr> 
    </table> 
    <table> 
     <tr>text here and then some input tag 
     </tr> 
     <tr>text here and then some input tag 
     </tr> 
    </table> 
    <table> 
     <tr>text here and then some input tag 
     </tr> 
    </table> 
    </div> 
</div> 

<div id="receiver1" style="background: #FF0000;"></div> 
<div id="receiver2" style="background: #00FF00;"></div> 
<div id="receiver3" style="background: #0000FF;"></div>

JS：

$(function(){ 
    var theContent = $("#content").html(); 
    $("#receiver1").html(theContent); 
    $("#receiver2").html(theContent); 
    $("#receiver3").html(theContent); 
});

您可以在此處查看示例：http://jsfiddle.net/3hm6N/1/

當然，您可以使用Greg Pettit所說的方法。另一件事，我沒有看到它，但由於標籤內部應該有<td> s或<th> s，所以表格是錯誤格式的。

來源

2012-07-18 05:20:19 davidbuzatto

嗨大衛;感謝您的迴應。我明白你的觀點，我需要將商店的HTML存儲在某個地方。我如何在js中存儲html。我瞭解你追加的部分。但最有可能的是，我將需要把具有唯一ID的html div放到var上，然後將它附加到id接收器的div上。 – 2012-07-18 13:36:30

@HaranMurthy - 嗨！是的你可以。你只需要像創建一個字符串一樣創建你的HTML並設置它。例如：var myHtml ='

Text ...

'; $（「#someId」）.html（myHtml）; – davidbuzatto 2012-07-18 14:13:20

@ David-得到它謝謝...因爲我也需要一個唯一的ID，所以我想採用這個程序並根據我的要求進行修改。 http://jsfiddle.net/yUfhL/。讓我知道你的想法。它看起來符合你建議的想法（這需要upvote）。非常感謝。 – 2012-07-18 14:26:38

Onclick事件動態構建並將div附加到現有的div（jquery或其他任何東西歡迎）

回答

相關問題