如何来使用jquery动态的往页面添加元素

方法1：

$("<tr><td>哇哈哈</td></tr>").appendTo($("#behindMe")); 

这种方式在动态添加一个小的片段时，是可取的，但如果动态添加的内容有很大一段或者这一段会被重复添加多次到当前页面中。那么在使用这种将插入内容在脚本里面写死的方式就不够优雅了，于是有了方法2：

方法2：

e.g

 

<script type="text/javascript">
    var temp;
    $(document).ready(function() {
        temp = $("#useToInsert");
        $("#addConfig").click(function() {
            temp.clone(true).appendTo($("#table1"));
            }
        });

    });
</script>

<div style="display: none;">
    <table>
        <tr id="useToInsert">
            <td>哇哈哈</td>
        </tr>
    </table>
</div>

<form>
    <div class="addSearch floatLeft"><a id="addConfig" href="#"></a></div>
    <table id="table1">
        <tr>
            <td>嘿嘿嘿</td>
        </tr>
    </table>
</form>

 

先在页面中预先定义可能会被创建的元素模块，将其隐藏。在jquery脚本中，需要动态添加该脚本时，选取到隐藏模块，复制一个副本，然后添加到指定的位置即可。