Question

这是对这个问题的跟进：
How to replace DOM element in place using Javascript?

我不是OP，但我面临着类似的情况。最初的问题是“如何使用Javascript将anchor元素替换为span。给出的答案（谢谢Bjorn Tipling）是使用replaceChild()，以下示例：

<html>
<head>
</head>
<body>
  <div>
    <a id="myAnchor" href="http://www.stackoverflow">StackOverflow</a>
  </div>
<script type="text/JavaScript">
  var myAnchor = document.getElementById("myAnchor");
  var mySpan = document.createElement("span");
  mySpan.innerHTML = "replaced anchor!";
  myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>
</body>
</html>

我的跟进是：如何在替换的DOM元素中添加/插入ID（例如"xyz"）和函数（例如onmouseout='doWhatever(this)'）？

Answer 1

mySpan.id = "abcd123";
mySpan.onclick = function () { console.log(this.id + " was clicked"); };

将HTML元素缓存到变量后，您可以继续使用该变量来处理它。

Answer 2

您可以通过简单设置来添加ID属性：

mySpan.id = "xyz";

你可以附上一个这样的事件：

mySpan.onmouseout = function() {
    doWhatever(this);
}

在动态创建DOM元素时，我会避免设置事件属性。以编程方式分配事件处理程序是正确的方法。

Answer 3

使用此：

<script type="text/JavaScript">
  var myAnchor = document.getElementById("myAnchor");
  var mySpan = document.createElement("span");
  mySpan.appendChild(document.createTextNode("replaced anchor!"));
  mySpan.id = "xyz";
  mySpan.onmouseout = function() {
      doWhatever(this);
  };
  myAnchor.parentNode.replaceChild(mySpan, myAnchor);
</script>

如何用JS替换Dom元素并包含id和JS函数？

3 个答案: