javascript - 使用 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>标签，您将不得不采取困难的方式并创建一个新节点并代替旧节点。

额外的闲聊:使用像 jquery 这样的库，这相对容易完成:

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