javascript - Replace Node Name

Is it possible to replace a nodes name? Like:

HTML:

<strong id="element">Text</strong>

Javascript:

var element = document.getElementById("element");
    element.nodeName = "b";

As I see it's not working, if it's not possible in this way, then how can it be done?

Why I need it:

I'm building a Text Editor, and IE uses strong instead of b in the execCommand() function and I would like to change that, I tried to build the execCommand("bold") from scratch but there is a lots of problem and differences even between IE 8 and 9. So now I decided to change it's node name, it would be really easy, but doesn't works.. :(

Note: I need this to work only in Internet Explorer.

Thanks

Is it possible to replace a nodes name? Like:

HTML:

<strong id="element">Text</strong>

Javascript:

var element = document.getElementById("element");
    element.nodeName = "b";

As I see it's not working, if it's not possible in this way, then how can it be done?

Why I need it:

Note: I need this to work only in Internet Explorer.

Thanks

Share Improve this question edited Mar 26, 2011 at 17:54 asked Mar 26, 2011 at 17:42 Adam Halasz 58.3k67 gold badges153 silver badges216 bronze badges

2 What are you trying to achieve? Why is it important for you that your STRONG element has a 'B' name? – Šime Vidas Commented Mar 26, 2011 at 17:47
I'm building a Text Editor, and IE uses strong instead of b in the execCommand() function and I would like to change that, I tried to build the execCommand("bold") from scratch but there is a lots of problem and differences even between IE 8 and 9. So now I decided to change it's node name, it would be really easy, but doesn't works.. :( – Adam Halasz Commented Mar 26, 2011 at 17:50
I'm working on a replacement for document.execCommand() module for my Rangy library. I have a working bold example now, although it only uses <span style="font-weight: bold"> at the moment. rangy.googlecode./svn/trunk/demos/bold.html – Tim Down Commented Mar 27, 2011 at 1:48

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

No, but you can replace the node easily:

var oldNode = document.getElementById('element'),
    newNode = document.createElement('b'),
    node,
    nextNode;

node = oldNode.firstChild;
while (node) {
    nextNode = node.nextSibling;
    newNode.appendChild(node);
    node = nextNode;
}

newNode.className = oldNode.className;
// Do attributes too if you need to
newNode.id = oldNode.id; // (Not invalid, they're not both in the tree at the same time)
oldNode.parentNode.replaceChild(newNode, oldNode);

Live example

Many thanks to Haochi for pointing out replaceChild, I had done this:

oldNode.parentNode.insertBefore(newNode, oldNode);
oldNode.parentNode.removeChild(oldNode);

Live example ...but replaceChild is cleaner.

Docs:

DOM2 core
DOM2 HTML
DOM3 core

Element.prototype.setTagName=function(strTN) {
 var oHTML=this.outerHTML, tempTag=document.createElement(strTN); //document.createElement will fire an error if string has wrong characters.
 var tName={original: this.tagName.toUpperCase(), change: strTN.toUpperCase()}
 if (tName.original == tName.change) return;
 oHTML=oHTML.replace(RegExp("(^\<" + tName.original + ")|(" + tName.original + "\>$)","gi"), function(x){return (x.toUpperCase().replace(tName.original, tName.change));});
 tempTag.innerHTML=oHTML;
 this.parentElement.replaceChild(tempTag.firstChild,this);
}

Use (in case you want to set a span for body's first element):

document.body.firstElementChild.setTagName("SPAN");

EDIT:

I forgot to mention something. It creates a new element so if you have the original one stored in a variable, the variable will be storing the old (unchanged) one. If the Element doesn't have a parent Element it fails.

That's why I made a new one:

Element.prototype.spawn = function(strTN = "spawn") {
 let tName = ({original: this.tagName.toUpperCase(), change: strTN.toUpperCase()}); if (tName.original == tName.change) { return; }
 let fragment = document.createRange().createContextualFragment(this.outerHTML.replace(new RegExp("(^\<\\b" + tName.original + "\\b)|(\\b" + tName.original + "\\b\>$)","gi"), function(x){return(x.toUpperCase().replace(tName.original, tName.change));}));
 return(fragment.firstChild);
}

This one just creates the new Element with all the original descendants but you have to place it to the DOM manually if you want:

var e = document.body.firstElementChild;
e.replaceWith(e.spawn("i"));

You could try getting the outerHTML and replacing the start and end tags.

var element = document.getElementById("element");
element.outerHTML = element.outerHTML.trim()
                                     .replace('<strong ','<button ')
                                     .replace('</strong>'.'</button');

Note well though, the solution above is applicable only for simple use cases. For a better solution go through snippet below.

var element = document.getElementById("element");
changeNodeName(element,'button');

function changeNodeName(el,str){
  var elNodeName = el.nodeName.toLowerCase();
  var newString = el.outerHTML.trim()
                    .replace('<'+ elNodeName,'<'+str);

  // To replace the end tag, we can't simply use replace()
  // because, replace() will replace the first occurrence,
  // which means if our element has a child element with the
  // same node name the end tag of the *child element* will be 
  // replaced, not the parent element. So,

  newString = newString
           .slice(0,newString.lastIndexOf('</'+str+'>'));    
  //now newString = "<button id='element'>Text"

  newString = newString + "</" + str + ">";
  el.outerHTML = newString;
}

<strong id="element">
  <strong>
    Text
  </strong>
</strong>

No, nodeName is read-only. From the spec:

readonly attribute DOMString       nodeName;

See here: http://www.w3/TR/DOM-Level-3-Core/core.html#ID-1950641247

You could store the innerHTML value of the strong element in a temp variable, then create a new "b" element and set its innerHTML to the value stored in the temp variable, and finally use the replaceChild method on the strong element's parent to replace the strong element with the new b element.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Replace Node Name - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)