如何包裝DIV添加到一個內部的div

我有這樣如何包裝DIV添加到一個內部的div

<div> 
<p> blah blah </p> 
<div class = foo> 

//some code 

</div> 
//some text 
</div>

一個HTML代碼，我想的JavaScript做的是包裝DIV添加到與類Foo內股利。使代碼變得像

<div> 
<p> blah blah </p> 
<div id = temp> 
<div class = foo> 

//some code 
</div> 
</div> 
//some text 
</div>

請告訴我如何做這樣的事情。非jQuery的解決方案會更有幫助.. :)

來源

2011-04-16 ghostCoder

我很好奇 - 這是什麼用例？你是否想要做一些拖放功能？ – 2011-04-16 05:52:12

實際上我需要做的是刪除與類foo的div，因爲我將數據存儲在數據庫中，並將其替換爲自定義標記並保存。每次從db加載整個代碼時，div中的類foo代碼都會重新生成。因此，當代碼加載所有的怪癖自定義標籤被替換爲div和其中的代碼重新生成。所以，我認爲，我會添加額外的div包裝，使用該div更改它裏面的html，然後刪除包裝div我添加 – ghostCoder 2011-04-16 05:57:22

使用POJS很簡單：

function divWrapper(el, id) { 
    var d = document.createElement('div'); 
    d.id = id; 
    d.appendChild(el); 
    return d; 
}

確保你通過它的東西塔t可以用div來包裝（例如，不要給它一個TR或TD等）。

你需要一些幫手功能，我不打算在這裏發佈getElementsByClassName函數，網上有很多選擇，一個好的應該先嚐試qSA，然後DOM方法，然後自定義功能。

假設你有一個考慮是這樣的：

function wrappByClass(className) { 
    var el, elements = getElementsByClassName(className); 

    for (var i = elements.length; i--;) { 
    el = elements[i]; 
    el.parentNode.replaceChild(divWrapper(el, 'foo' + i), el); 
    } 
}

編輯

經過思考，我更喜歡下面的方法。它首先將包裝器div插入到DOM中，然後將要包裝的元素移動到其中。上述似乎將元素移出DOM，然後想要在DOM中使用它的位置來插入新節點。它可能有效，但似乎對我來說很容易出錯。所以這裏有一個更好的解決方案，在Safari中進行測試：

// Quick implementation of getElementsByClassName, just for prototypeing 
function getByClassName(className, root) { 
    var root = root || document; 
    var elements = root.getElementsByTagName('*'); 
    var result = []; 
    var classRe = new RegExp('(^|\\s)' + className + '(\\s|$)'); 

    for (var i=0, iLen=elements.length; i<iLen; i++) { 

    if (classRe.test(elements[i].className)) { 
     result.push(elements[i]); 
    } 
    } 
    return result; 
} 

var divWrapper = (function() { 
    var div = document.createElement('div'); 

    return function(el, id) { 
    var oDiv = div.cloneNode(false); 
    oDiv.id = id; 
    el.parentNode.insertBefore(oDiv, el); 
    oDiv.appendChild(el); 
    } 
}()); 

function wrapByClassName(className) { 
    var els = getByClassName(className); 
    var i = els.length; 
    while (i--) { 
    divWrapper(els[i], 'foo' + i) 
    } 
}

來源

2011-04-16 06:11:19 RobG

+1 OP標記了問題* jQuery *，這使得您的非常正確的答案仍然相當多餘，但我會爲jQuery解決方案;） – 2011-04-16 07:45:05

真的很好的代碼...很好的爲我做了一些改變...... :) – ghostCoder 2011-04-17 05:02:53

$('.foo').wrap('<div id="temp"/>');

見$.wrap()

注意，如果有超過1個元素包裹，你有ID爲「TEMP」

來源

2011-04-16 05:56:24

只有一個div被包裝 – ghostCoder 2011-04-16 06:01:24

你可以建議一個非jQuery解決方案.. – ghostCoder 2011-04-16 06:02:10

RobG的答案看起來不錯:) – 2011-04-16 16:19:06

var wrapper = document.createelement('div'); 
var myDiv = document.getelementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv);

多個元素

來源

2011-04-16 06:08:20 Headshota

如何包裝DIV添加到一個內部的div

回答

相關問題