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

时间:2013-08-20 11:11:08

标签: javascript

我在更改元素标记时遇到了一些问题。这就是我所拥有的。

<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属性的正确方法。为什么这不起作用?

感谢。

3 个答案:

答案 0 :(得分:2)

tagName是一个只读的DOM属性,请参阅spec:http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815

如果您想将<a>标记转换为<input>标记,则必须采取严格措施并创建新节点并替换旧节点。

Bonus chatter:使用类似jquery的lib,这相对容易完成:

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

答案 1 :(得分:1)

TagName是只读参数。您需要通过节点删除或添加来更改元素。您也可以通过outerHTML中的替换来更改它(警告:性能命中)。

答案 2 :(得分:0)

tagName只是一个字符串,您实际上无法使用它更改元素的HTML。会很好!