Вставьте 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().
• Использование селектора и метода .load() для загрузки html-данных из файла.

Проблема в том, что я не знаю, могу ли я правильно использовать эти методы для получения результата.

Если кто-нибудь уже имел опыт работы с ними?

Answer 1

Мне не совсем понятно, что вы пытаетесь сделать, но вы могли бы сделать что-то вроде этого ...

Вместо использования 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
        }
    });
}

after () проанализирует html-ответ и вставит его в dom, ну после выбранного элемента.

С помощью $. Get вы также можете сделать что-то более продвинутое, и ваш шаблон сможет принимать строки запросов или данные и вставлять их в ваш html перед рендерингом страницы.

Answer 2

вы можете использовать $(".divtogoafter:last").append("content to insert");, который использует последний псевдо-селектор, так что последний div - это тот, после которого вставляются данные.