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

直播示例： （我使用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">

有关可重复使用的功能，请参阅this gist。

旁注：我会避免使用全部数字的id值。虽然它们在HTML中有效（从HTML5开始），但它们在CSS中无效，因此您无法设置这些元素的样式，或者使用像jQuery那样使用CSS选择器与它们交互的库。

Answer 2

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

FIDDLE

Answer 3

您的代码存在一些问题：

HTML元素ID必须以字母字符开头。
document.getElementById("99").replace(/wns/g,"lmn")实际上是在元素上运行replace命令。 Replace是一个字符串方法，因此会导致错误。
您正在尝试将此结果分配给document.getElementById("99").innerHTML，这是里面元素（标记，属性和所有属于outerHTML的一部分）。
您无法动态更改元素的标记名，因为它从根本上改变了它的性质。想象一下，将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

您可以使用JavaScript或jQuery实现此目的。

我们可以删除DOM元素（在这种情况下为标记），并在jQuery中使用.html或.append menthods重新创建。

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

OR

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

替换特定的标签名称javascript

5 个答案: