2

这是对这个问题的跟进：
如何使用 Javascript 替换 DOM 元素？

我不是OP，但我面临着类似的情况。最初的问题是“如何anchor用使用 Javascript 替换元素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)'

4

3 回答 3

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

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

于 2013-03-27T21:57:50.947 回答
1

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

mySpan.id = "xyz";

你可以像这样附加一个事件：

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

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

于 2013-03-27T21:58:04.213 回答
1

用这个：

<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>
于 2013-03-27T21:59:50.923 回答