如何讓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> 

使用包（）將不工作，要麼因爲即使得到更多的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

您的標記是不完整的......之前和之後都取完節點只...

你正在嘗試做的是包裝您的內容，這是不同的。

你想要這個：

.wrap（html）;

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

Answer 3

我很抱歉，但是這一次應該是顯而易見的。在你的情況下，你不能使用wrap，因爲它將原始節點粘貼到它在包裝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); 
} 

Answer 4

我認爲您接近它錯了。想想你實際想要達到什麼...

你想用一個div來包裝所有東西。然後插入1格前和1格後。

so so .wrap（）first，then append before and after-divs relative to the content-div。

如果你碰巧有實際的HTML作爲字符串（從XHR或某事），那麼你需要讀出HTML並連接它自己作爲道格拉斯·梅爾建議

。