替换特定的标记名javascript

eqzww0vc  于 2023-05-27  发布在  Java
关注(0)|答案(6)|浏览(126)

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

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

wish函数中,我想将其更改为

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

我试着这样做:

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

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

0yycz8jy

0yycz8jy1#

您不能更改现有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);

示例:(我使用了divp,而不是wnslmn,并通过带边框的样式表对它们进行了样式化,以便您可以看到更改)

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选择器的库来与它们进行交互。

g0czyy6m

g0czyy6m2#

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

FIDDLE

rdrgkggo

rdrgkggo3#

你的代码有几个问题:

  1. HTML元素ID必须以字母字符开头。
  2. document.getElementById("99").replace(/wns/g,"lmn")实际上是在元素上运行替换命令。Replace是一个字符串方法,因此这会导致错误。
    1.您试图将此结果分配给document.getElementById("99").innerHTML,这是元素内部的HTML(标签,属性等都是outerHTML的一部分)。
    1.您不能动态更改元素的标记名,因为它从根本上改变了元素的性质。假设将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/

xfb7svmp

xfb7svmp4#

您可以使用jQuery替换整个标记

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

zaq34kh65#

[...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>
z3yyvxxp

z3yyvxxp6#

您可以使用JavaScript或jQuery来实现这一点。
我们可以删除DOM元素(在本例中为标记),并在jQuery中使用.html或.append方法重新创建。

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

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

相关问题