替換特定標簽名稱 javascript

Question

我想知道我們是否可以更改標簽中的標簽名稱而不是其內容。 我有這個內容

< wns id="93" onclick="wish(id)">...< /wns>    

希望 function 我想把它改成

< lmn id="93" onclick="wish(id)">...< /lmn>

我試過這種方式

document.getElementById("99").innerHTML =document.getElementById("99").replace(/wns/g,"lmn")

但它不起作用。 請注意，我只想更改具有特定 id 的特定標簽，而不是每個 wns 標簽。

謝謝你。

Answer 1

您不能更改現有 DOM 元素的標簽名稱； 相反，您必須創建一個替換，然后將其插入到元素所在的位置。

其基礎是將子節點移動到替換中，並類似地復制屬性。 所以例如：

var wns = document.getElementById("93");
var lmn = document.createElement("lmn");
var index;

// Copy the children
while (wns.firstChild) {
    lmn.appendChild(wns.firstChild); // *Moves* the child
}

// Copy the attributes
for (index = wns.attributes.length - 1; index >= 0; --index) {
    lmn.attributes.setNamedItem(wns.attributes[index].cloneNode());
}

// Replace it
wns.parentNode.replaceChild(lmn, wns);

現場示例：（我使用div和p而不是wns和lmn ，並通過帶邊框的樣式表對它們進行樣式設置，以便您可以看到更改）

 document.getElementById("theSpan").addEventListener("click", function() { alert("Span clicked"); }, false); document.getElementById("theButton").addEventListener("click", function() { var wns = document.getElementById("target"); var lmn = document.createElement("p"); var index; // Copy the children while (wns.firstChild) { lmn.appendChild(wns.firstChild); // *Moves* the child } // Copy the attributes for (index = wns.attributes.length - 1; index >= 0; --index) { lmn.attributes.setNamedItem(wns.attributes[index].cloneNode()); } // Insert it wns.parentNode.replaceChild(lmn, wns); }, false);

 div { border: 1px solid green; } p { border: 1px solid blue; }

 <div id="target" foo="bar" onclick="alert('hi there')"> Content before <span id="theSpan">span in the middle</span> Content after </div> <input type="button" id="theButton" value="Click Me">

有關可重用功能，請參閱此要點。

---

旁注：我會避免使用全是數字的id值。 盡管它們在 HTML 中有效（從 HTML5 開始），但它們在 CSS 中無效，因此您無法設置這些元素的樣式，或使用使用 CSS 選擇器與它們交互的 jQuery 等庫。

Answer 2

var element = document.getElementById("93");
element.outerHTML = element.outerHTML.replace(/wns/g,"lmn");

小提琴

Answer 3

您的代碼有幾個問題：

1. HTML 元素 ID 必須以字母字符開頭。
2. document.getElementById("99").replace(/wns/g,"lmn")有效地在元素上運行替換命令。 Replace 是一個字符串方法，因此這會導致錯誤。
3. 您正在嘗試將此結果分配給document.getElementById("99").innerHTML ，它是元素內的 HTML（標簽、屬性和所有內容都是outerHTML一部分）。
4. 您不能動態更改元素的標記名，因為它從根本上改變了它的性質。 想象一下將textarea更改為select ......有很多屬性是一個專有的，另一個是非法的：系統無法工作！

但是，您可以做的是創建一個新元素，並為其提供舊元素的所有屬性，然后替換它：

<wns id="e93" onclick="wish(id)">
    ...
</wns>

使用以下腳本：

// Grab the original element
var original    = document.getElementById('e93');
// Create a replacement tag of the desired type
var replacement = document.createElement('lmn');

// Grab all of the original's attributes, and pass them to the replacement
for(var i = 0, l = original.attributes.length; i < l; ++i){
    var nodeName  = original.attributes.item(i).nodeName;
    var nodeValue = original.attributes.item(i).nodeValue;

    replacement.setAttribute(nodeName, nodeValue);
}

// Persist contents
replacement.innerHTML = original.innerHTML;

// Switch!
original.parentNode.replaceChild(replacement, original);

演示在這里： http : //jsfiddle.net/barney/kDjuf/

Answer 4

使用 jquery 你可以替換整個標簽

var element = $('#99');
element.replaceWith($('<lmn id="'+element.attr('id')+'">'+element.html()+'</lmn>'));

Answer 5

 [...document.querySelectorAll('.example')].forEach(div => { div.outerHTML = div.outerHTML .replace(/<div/g, '<span') .replace(/<\\/div>/g, '</span>') })

 <div class="example">Hello,</div> <div class="example">world!</div>

Answer 6

您可以通過使用 JavaScript 或 jQuery 來實現這一點。

我們可以刪除 DOM 元素（在這種情況下是標簽）並在 jQuery 中使用 .html 或 .append 方法重新創建。

$("#div-name").html("<mytag>Content here</mytag>");

要么

$("<mytag>Content here</mytag>").appendTo("#div-name");