javascript - 替换特定标签名称 javascript

Question

我想知道我们是否可以更改标签中的标签名称而不是其内容。我有这个内容

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

在希望功能中，我想将其更改为

< 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);

现场示例：（ 我使用divandp而不是wnsand 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 中无效，因此您无法设置这些元素的样式，或者使用 jQuery 等使用 CSS 选择器与它们交互的库。

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. 您不能动态更改元素的标记名，因为它从根本上改变了它的性质。想象一下将 a 更改textarea为 a 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");