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或其他任何东西欢迎）

回答

相关问题