更改节点类型答案

【问题标题】：Change node type更改节点类型
【发布时间】：2011-07-18 03:34:41
【问题描述】：

使用 jQuery，是否可以将所有匹配的元素更改为不同的类型？

例如，我可以选择所有a标签$("a")，并将它们更改为inputs吗？

【问题讨论】：

没试过这个，但我猜不会。除非您的意思是通过从 DOM 中删除它们并在其位置添加一些新元素来更改它们，这应该是可能的。
@Brad - 也许是为了创建内联的可编辑超链接？
@aroth，啊，这很有道理。
@Brad - 对于用户脚本

标签： javascript jquery html dom

【解决方案1】：

将 A 元素更改为 INPUT 元素不会更改类型，而是更改 tagName。根据DOM 2 Core specification，一个元素的tagName是只读的，所以不，你不能设置它。

但是，您可以用不同的元素替换一个元素，前提是它在 DOM 中有效。

【讨论】：

【解决方案2】：

不，您实际上无法更改它，但您可以使用 replaceWith() 方法将它们替换为新元素：

$("a").replaceWith("<input>");

如果您想保留任何属性，则需要手动设置它们：

$("a").replaceWith(function() {
    return $("<input>", {
        class: this.className,
        value: this.innerHTML
    });
});

【讨论】：

这很好，但他将不得不自己复制属性。并不是说那是一件坏事……
这会保留被替换标签的内部 HTML 内容吗？
@esqew：不，但是<input> 没有内部内容。您想设置输入的value 吗？我会更新的。

【解决方案3】：

使用标准 JavaScript 的 ChildNode.replaceWith() 方法可以做到这一点。运行示例。

var element = document.querySelector("span");
var elementInnerHTML = element.innerHTML;
var newElement = document.createElement("h1");
newElement.innerHTML = elementInnerHTML;

element.replaceWith(newElement);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>hightekk.com</title>
</head>
<body>
  <span>
    Hello World
  </span>
</body>
</html>

【讨论】：

【解决方案4】：

$("a").each( function() {
    this.replaceWith( $("<input>").html( this.innerHTML() ) );
});

【讨论】：

好像你有点猜对了。只是一些提示，this.replaceWith(... 应该是 $(this).replaceWith(...，$("<input>").html(... 应该是 $("<input>").val(...，this.innerHTML() 应该是 this.innerHTML。
输入元素没有内容，所以设置它的innerHTML可能没有效果，或者可能会抛出错误。