使用onclick设置tagName属性时出现问题

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

我没有收到任何错误消息，这看起来是访问tagName属性的正确方式。为什么这不起作用？

谢谢。

Answer 1

tagName是只读DOM属性，请参阅规范：http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815

如果您想将<a>标记转换为<input>标记，则必须艰难地创建一个新节点并放置旧节点。

额外的聊天：使用类似lib的jquery，这相对容易完成：

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

Answer 2

TagName是一个只读参数。您需要通过删除或添加节点来更改元素。您也可以通过outerHTML中的替换来更改它（警告：性能受损）。

Answer 3

tagName只是一个字符串，实际上你不能用它来更改元素的HTML！