如何來使用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腳本中，需要動態添加該腳本時，選取到隱藏模塊，複製一個副本，然後添加到指定的位置即可。