Как сохранить jQuery от разбора вставленного HTML?

Question

Кто-нибудь знает, как остановить jQuery при разборе html, который вы вставили до () и после ()? Скажем, у меня есть элемент:

<div id='contentdiv'>bla content bla</div>

и я хочу обернуть его следующим образом:

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>
</div>

Я использую следующий jQuery / Javascript

$('#contentDiv').each( function() {
    var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
    var afterHTML = "<div id='afterDiv'></div></div>";  
    $(this).before(beforeHTML);
    $(this).after(afterHTML);
}

Это, однако, не приведет к правильной упаковке, оно создаст:

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
</div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>

Использование wrap () также не сработает, поскольку при использовании jQuery это еще более запутывается:

$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");

Как мне решить эту проблему?
Заранее спасибо!

Answer 1

$('#contentDiv').each(function() {
    $(this).wrap('<div id="wrapperDiv">');
    $(this).before('<div id="beforeDiv">');
    $(this).after('<div id="afterDiv">');
});

производит:

<div id='wrapperDiv'>
    <div id='beforeDiv'></div>
    <div id='contentDiv'>bla content bla</div>
    <div id='afterDiv'></div>
</div>

Answer 2

Я думаю, вы ошибаетесь. Подумайте, чего вы на самом деле хотите достичь ...

Вы хотите обернуть все с одним div. Затем вставьте 1 деление до и 1 деление после.

поэтому сделайте сначала .wrap (), затем добавьте до и после деления относительно содержимого div.

если у вас есть фактический HTML в виде строки (из XHR или чего-то еще), вам нужно прочитать html и объединить его самостоятельно, как предложил Дуглас Мейл.

Answer 3

ваша разметка не завершена ... до и после того, как будут приняты только полные узлы ...

вы пытаетесь сделать перенос вашего контента, который отличается.

Вы хотите это:

.wrap (HTML);

http://docs.jquery.com/Manipulation/wrap#html

Answer 4

Извините, но это должно быть очевидно. В вашем случае вы не можете использовать перенос, потому что он вставляет исходный узел в самый глубокий узел, который он находит в упаковочном HTML. Вы этого не хотите. Вместо этого прочитайте HTML из вашего объекта и объедините его с тем, что у вас есть:

$('#contentDiv').each( function() {
    var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
    var afterHTML = "<div id='afterDiv'></div></div>";

    // This line below will do it...
    $(this).html(beforeHTML + $(this).html() + afterHTML);
}