在html之后插入html

Question

我的问题如下：

插入<div>容器的最佳方法是什么?在上次插入容器之后的下一个方法是什么？

<div class="pane">
    <div class="inhoud">
        <h3>Sample heading</h3>
        <p>Testbericht.</p>
    </div>
    <form id="noteform" class="frm">
        <input type="image" src="images/kn_verwijder.gif" alt="delete" class="delete" />
        <br />
        <input type="hidden" name="frmnoteid" id="frmnoteid" value="" />
    </form>
</div>

到目前为止我所知道的是：

• 使用$("#foo > div").size()和.insertAfter()方法计算页面上已经存在的div数。
• 使用选择器和.load()方法从文件中加载html数据。

问题是，我不知道是否可以正确地使用这些方法来获得结果。

有没有人曾经有过这样的经历？

Answer 1

您可以使用最后使用psuedo选择器的$(".divtogoafter:last").append("content to insert");，这样最后一个div就是在后面插入数据的那个。

Answer 2

我不太清楚你想做什么，但你可以这样做.

而不是使用load()，而是使用$.get()加载html，而不插入它，然后使用sucess回调将其附加到页面中。这样，就不需要担心创建包装器div了。只要有您的html页面，tbnote.html，就可以得到您想要的适当标记。

function newnote() {
    $.get("tbnote.html", function(html) {
        if($(.pane).length > 0) { \\test  there is already .pane div on page
            $(".pane:last").after(html);
        } else {
            $("#someOtherDiv").append(html); \\append to another div
        }
    });
}

()之后将解析html响应，并将其注入所选元素之后的dom中。

使用$.get，您还可以做一些更高级的操作，让模板能够接受查询字符串或数据，并在呈现页面之前将其插入到html中。