我希望用按钮替换一些特定的跨度,并且我希望替换的跨度具有相同的类名。如果跨度包含“苹果”或“香蕉”,但我不想选择其他带有“橙色”或“猕猴桃”的跨度,我该如何替换跨度(按钮)?
来自:
<span class=>
"kiwi"
</span>
<span class=>
"apple"
</span>
<span class=>
"orange"
</span>
<span class=>
"banana"
</span>
致:
<button>
"apple"
</button>
<button>
"banana"
</button>
代码:
function replaceElement (source, tagname) {
var range = document.createRange();
var element = document.createElement(tagname);
range.selectNodeContents(source);
element.appendChild(range.extractContents());
source.parentNode.replaceChild(element, source);
}
var spans = document.querySelectorAll('span'), i;
for (i = 0; i < spans.length; ++i) {
replaceElement(document.querySelector('span'), 'button');
}
最佳答案
您无法根据内部文本选择元素。但您可以做的是,您可以根据 span 元素的内部文本内容对其进行过滤。
function replaceElement (source, tagname) {
var range = document.createRange();
var element = document.createElement(tagname);
range.selectNodeContents(source);
element.appendChild(range.extractContents());
source.parentNode.replaceChild(element, source);
}
var spans = document.querySelectorAll('span'), i;
for (i = 0; i < spans.length; ++i) {
if(spans[i].textContent.match('apple') ||spans[i].textContent.match('banana') ){
replaceElement(spans[i], 'button');
}
}
<span class=>
"kiwi"
</span>
<span class=>
"apple"
</span>
<span class=>
"orange"
</span>
<span class=>
"banana"
</span>
关于javascript - 如何替换包含选定标签的特定标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53803268/