2

これは、次の質問へのフォローアップです:
How to replace DOM element in place using Javascript?

私はOPではありませんでしたが、同様の状況に直面しています。最初の質問は、「anchor要素を Javascript を使用して置き換える方法」でした。与えられた答え ( Bjorn Tiplingspanに感謝します) は、次の例で を使用することでした: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 に答える