Javascript: Как изменить имя узла? - PullRequest
Новая
       10

Javascript: Как изменить имя узла?

4 голосов
/ 15 февраля 2011

Например, у меня есть этот HTML: 

<body>
    <div>Text</div>
</body>

И я хотел бы изменить div на что-то еще, например p.

Это то, что я пробовал, ноне работает: 

var div = document.getElementsByTagName("div")[0]; // Get Element
    div.nodeName = "p"; // Change It's Node Name to P

Пожалуйста, никаких библиотек, и я не хочу заменять фактический div новым p:)

Ответы [ 5 ]

9 голосов
/ 15 февраля 2011

Вы не можете просто изменить элемент.Вы должны создать новый.Например: 

var div = document.getElementsByTagName("div")[0];
var p = document.createElement('p');
p.innerHTML = div.innerHTML;
div.parentNode.replaceChild(p, div);

Но это может привести к неверной разметке, если исходный элемент содержит узлы, которые не могут быть потомками нового узла.

Ссылка: document.createElement, Node.replaceChild

Примечание: Лучшая версия (поскольку онане зависит от сериализации DOM в текст и обратно и сохраняет атрибуты), можно найти по адресу https://stackoverflow.com/a/8584158/218196.

1 голос
/ 15 февраля 2011

Вы не можете. То, что вам нужно, это tagName, но оно доступно только для чтения. Вместо этого вам нужно будет создать новый узел нужного типа, а затем перенести innerHTML (и любые другие свойства, такие как className или style) в новый узел. Затем вставьте новый узел в родительский узел старого узла, затем удалите старый узел (или используйте replaceChild).

Другими словами, длинная дорога - единственная дорога.

1 голос
/ 15 февраля 2011

Вы не можете.

Как Документы MDC говорят :

nodeName является атрибутом только для чтения.

Вам нужно будет создать новый элемент и дать ему правильное содержимое и атрибуты.

0 голосов
/ 24 апреля 2018

Причина, по которой вы не можете просто изменить свойство tagName, заключается в том, что разные HTML-теги на самом деле являются разными классами объектов.Тег div - это экземпляр HTMLDivElement, тег p - это экземпляр HTMLParagraphElement и т. Д.Эти классы могут иметь совершенно разные свойства и интерфейсы, поэтому превращение одного в другой не так тривиально, как вы думаете.

0 голосов
/ 24 апреля 2018

Я решил это в сценарии XML (например, где нет innerHTML), например так: 

function renameNode (node, newNodeName) {
    const newNode = node.ownerDocument.createElement(newNodeName);
    Array.from(node.attributes).forEach(attr => newNode.setAttribute(attr.localName, attr.value));
    Array.from(node.childNodes).forEach(childNode => newNode.appendChild(childNode));

    node.parentElement.insertBefore(newNode, node);
    node.parentElement.removeChild(node);
}

Не возвращает ничего, но обновит DOM.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...