Geek asks and answers

Replace specific javascript tag name

I want to know if we can change the tag name in the tag, and not its contents. I have this content

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

in the desire 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 does not work. Plz note that i just want to change this particular tag with a specific id, and not with every wns tag.

Thank.

+5
source share
5 answers
document.getElementById("93").outerHTML = document.getElementById("93").outerHTML.replace(/wns/g,"lmn");

Fiddle

+8
source

You cannot change the tag name of an existing DOM element; instead, you need to create a replacement, and then paste it where the element was.

The basis of this is to move the child nodes into substitution and similar copying of attributes. For example:

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">
Hide result

. .

. id, . HTML ( HTML5), CSS , jQuery, CSS .

+14

:

  • HTML- .
  • document.getElementById("99").replace(/wns/g,"lmn") replace . Replace - , .
  • document.getElementById("99").innerHTML, HTML (, outerHTML).
  • , . , textarea select... , , : !

, , :

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

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

+4

jquery

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

, JavaScript jQuery.

We can remove the DOM element (in this case the tag) and recreate it using .html or .append menthods in jQuery.

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

OR

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

More articles:


All Articles