如何在html标签之间插入`<span id =“myspanid”></span>`到所有内容？

Question

富勒例子，我想改变

<h1>content1</h1><p>content2</p>

到

<h1><span id="myspanid">content1</span></h1><p><span id="myspanid">content2</span></p>

我喜欢用PHP来做到这一点，在服务器端。

Answer 1

如果您使用jQuery：

$('body *').wrap('<span class="foo"></span>'); 

如果你不是（解决@minitech's code）：

var elts = document.body.childNodes, 
    numElts = elts.length, 
    elt; 
for(var i = 0; i < numElts; i++) { 
    elt = elts[i]; 
    elt.innerHTML = '<span class="foo">' + elt.innerHTML + '</span>'; 
} 

Answer 2

如果你没有（固定为“做一个字符串'，希望）：

var b = document.body.childNodes; 
for(var i = 0; i < b.length; i++) { 
    if(b[i].nodeType === 1) { 
     b[i].innerHTML = '<span class="foo">' + b[i].innerHTML + '</span>'; 
    } else if(b[i].nodeType === 3) { 
     var newElement = document.createElement('span'); 
     newElement.className = "foo"; 
     b.replaceChild(newElement, b[i]); 
    } 
} 

Answer 3

不要用其他答案中建议的方式使用innerHTML，它会与其他任何其他问题混淆有元素。你需要寻找的文本节点和包装他们，就像这样：

// Pass either an id or a DOM element 
var wrapContent = (function() { 

    // This could be passed as a parameter 
    var oSpan = document.createElement('span'); 
    oSpan.className = 'mySpanClass'; 

    return function(id) { 
    var el = (typeof id == 'string')? document.getElementById(id) : id; 
    var node, nodes = el && el.childNodes; 
    var span; 
    var fn = arguments.callee; 

    for (var i=0, iLen=nodes.length; i<iLen; i++) { 
     node = nodes[i]; 
     if (node.nodeType == 3) { 
     span = oSpan.cloneNode(false); 
     node.parentNode.insertBefore(span, node); 
     span.appendChild(node); 
     } else { 
     fn(node); 
     } 
    } 
    } 
}()); 

如果你想在HTML的字符串运行它，然后创建一个div，插入字符串作为它的innerHTML，运行上面的函数传递它的股利，然后抓住innerHTML的背：

function wrapHTMLstring(s) { 
    var el = document.createElement('div'); 
    el.innerHTML = s; 
    wrapContent(el); 
    return el.innerHTML; 
} 

alert(wrapHTMLstring('<h1>content1</h1><p>content2</p>'));" 
// <h1><span class="mySpanClass">content1</span></h1><p><span class="mySpanClass">content2</span></p> 

注意childNodes集合将在不同的浏览器不同，对于相同的HTML，如果您有任何多余的空格，所以你可能需要做一些处理存在（例如，如果一个textNode没有任何内容，不包装它）。