替换特定的标签名称 javascript

replace specific tag name javascript

提问by Mohan Krishna

I want to know if we can change tag name in a tag rather than its content. i have this content

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

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

in wish function i want to change it to

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

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

i tried this way

我试过这种方式

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

but it doesnot work. plz note that i just want to alter that specific tag with specific id rather than every wns tag..

但它不起作用。请注意，我只想更改具有特定 id 的特定标签，而不是每个 wns 标签。

Thank you.

谢谢你。

回答by T.J. Crowder

You can't change the tag name of an existing DOM element; instead, you have to create a replacement and then insert it where the element was.

您不能更改现有 DOM 元素的标签名称；相反，您必须创建一个替换项，然后将其插入到元素所在的位置。

The basics of this are to move the child nodes into the replacement and similarly to copy the attributes. So for instance:

其基础是将子节点移动到替换中，并类似地复制属性。所以例如：

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

Live Example:(I used divand prather than wnsand lmn, and styled them via a stylesheet with borders so you can see the change)

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

See this gistfor a reusable function.

有关可重用功能，请参阅此要点。

---

---

Side note: I would avoid using idvalues that are all digits. Although they're valid in HTML (as of HTML5), they're invalid in CSS and thus you can't style those elements, or use libraries like jQuery that use CSS selectors to interact with them.

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

回答by adeneo

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

FIDDLE

小提琴

回答by Barney

There are several problems with your code:

您的代码有几个问题：

1. HTML element IDs must start with an alphabetic character.
2. document.getElementById("99").replace(/wns/g,"lmn")is effectively running a replace command on an element. Replace is a string method so this causes an error.
3. You're trying to assign this result to document.getElementById("99").innerHTML, which is the HTML insidethe element (the tags, attributes and all are part of the outerHTML).
4. You can't change an element's tagname dynamically, since it fundamentally changes it's nature. Imagine changing a textareato a select… There are so many attributes that are exclusive to one, illegal in the other: the system cannot work!

1. HTML 元素 ID 必须以字母字符开头。
2. document.getElementById("99").replace(/wns/g,"lmn")正在对元素有效地运行替换命令。Replace 是一个字符串方法，因此这会导致错误。
3. 您正在尝试将此结果分配给document.getElementById("99").innerHTML，它是元素内的 HTML （标签、属性和所有内容都是 的一部分outerHTML）。
4. 您不能动态更改元素的标记名，因为它从根本上改变了它的性质。想象一下将 a 更改textarea为 a select...... 有很多属性是一个专有的，另一个是非法的：系统无法工作！

What you can do though, is create a new element, and give it all the properties of the old element, then replace it:

但是，您可以做的是创建一个新元素，并为其提供旧元素的所有属性，然后替换它：

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

Using the following script:

使用以下脚本：

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

Demo here: http://jsfiddle.net/barney/kDjuf/

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

回答by cioddi

using jquery you can replace the whole tag

使用 jquery 你可以替换整个标签

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

回答by Aleem

You can achieve this by using JavaScript or jQuery.

您可以通过使用 JavaScript 或 jQuery 来实现这一点。

We can delete the DOM Element(tag in this case) and recreate using .html or .append menthods in jQuery.

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

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

OR

或者

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