Заменить имя узла

Question

Можно ли заменить имя узла?Как:

HTML:

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

Javascript:

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

Как я вижу, это не работает, если это невозможно, то как это может бытьготово?

Зачем мне это нужно:

Я создаю текстовый редактор, и IE использует strong вместо b в функции execCommand (), и мне хотелось бычтобы изменить это, я попытался создать execCommand («жирный») с нуля, но есть много проблем и различий даже между IE 8 и 9. Так что теперь я решил изменить его имя узла, это было бы действительно легко, ноне работает ..: (

Примечание: Мне нужно, чтобы это работало только в Internet Explorer.

Спасибо

Answer 1

Нет, но вы можете легко заменить узел:

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

Живой пример

Большое спасибо Хаочи за то, что он указал replaceChild, я сделал это:

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

Живой пример ... но replaceChild чище.

Docs:

• Ядро DOM2
• DOM2 HTML
• ядро ​​DOM3

Answer 2

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

Используйте (если вы хотите установить span для первого элемента тела):

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

Answer 3

Нет, nodeName только для чтения.Из спецификации:

readonly attribute DOMString       nodeName;

Смотрите здесь: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247

Answer 4

Вы можете попытаться получить outerHTML и заменить начальный и конечный теги.

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

Обратите внимание: , однако, приведенное выше решение применимо только для простых случаев использования.Для лучшего решения воспользуйтесь фрагментом ниже.

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>

Answer 5

Вы можете сохранить значение innerHTML сильного элемента во временной переменной, затем создать новый элемент "b" и установить его innerHTML в значение, сохраненное в временной переменной, и, наконец, использовать метод replaceChild в родительском элементе сильного элемента заменить сильный элемент новым элементом b.