Проблемы с установкой свойства tagName с onclick

Question

У меня возникли проблемы с изменением тега элемента. Это то, что у меня есть.

<a id="title2" href="#" onclick="this.tagName = 'INPUT'">Click to change element tag.</a> 

или больше ...

<a id="title" href="#" onclick="change_to_textfield()">Click to change element tag.</a> 

function change_to_textfield() { 
    document.getElementById('title').tagName = 'INPUT'; 
} 

Я не получаю никаких сообщений об ошибках, и это похоже на правильный путь, чтобы получить доступ к свойству тэгу. Почему это не работает?

Спасибо.

Answer 1

TagName - это аргумент, доступный только для чтения. Вам необходимо изменить элемент путем удаления или добавления узла. Вы также можете изменить его с помощью замены в outerHTML (предупреждение: производительность).

Answer 2

tagName - это просто строка, вы не можете изменить HTML-код элемента с ним. Было бы неплохо!

Answer 3

тэгу является только для чтения DOM свойства, см Спецификации: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815

Если вы хотите, чтобы преобразовать <a> тег в <input> тег, вам придется пройти нелегкий путь и создать новый узел и поставить на месте старого.

Bonus болтовня: с Lib, как JQuery это относительно легко сделать:

function change_to_textfield() { 
    var link = $("#title"); 
    var textField = $("<input type='text'>").val(link.text()); 
    link.replaceWith(textField); 
}