How to replace Dom element with JS and include an id and a JS function?

Question

This is a follow up to this question:
How to replace DOM element in place using Javascript?

I wasn't the OP but I am facing a similar situation. The initial question was "how to replace an anchor element with a span using Javascript. The answer that was given (thank you Bjorn Tipling ) was to use replaceChild(), with the following example:

<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>

My follow up is: how to add / insert an id (e.g., "xyz")and a function (e.g., onmouseout='doWhatever(this)') to the replaced DOM element?

Don't use inline attribute [event handlers](http://quirksmode.org/js/introevents.html) — Bergi, Mar 27 '13 at 21:58
I'm reading this document. It's doing a good job of explaining the "how", but not the "why", except added functionalities I'm not sure I need at this point. Not trying to pick a fight, I'm just learning and after reading the document I'm still not clear as to the benefit of using the modern approach... — JDelage, Mar 27 '13 at 22:09
Why? - [Because](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) :-) — Bergi, Mar 27 '13 at 22:22
Yes, and also http://stackoverflow.com/questions/6941483/onclick-vs-event-handler . I've added it to my to-do list. Thanks for your patience. ;-) — JDelage, Mar 27 '13 at 22:24

score 1 · Answer 1 · answered Mar 27 '13 at 21:57

1

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

Once you have your HTML element cached to a variable, you can just keep using that variable to work with it.

answered Mar 27 '13 at 21:57

Norguard

26,167
5
41
49

score 1 · Accepted Answer · answered Mar 27 '13 at 21:58

1

You can add an id property by simply setting it:

mySpan.id = "xyz";

And you can attach an event like so:

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

I would avoid setting event attributes when dynamically creating DOM elements. Assigning the event handlers programmatically is the right way to go.

answered Mar 27 '13 at 21:58

Cᴏʀʏ

105,112
20
162
194

Assigning events through HTML attributes is an ancient technique for doing so. The modern, unobtrusive way to hook up event handlers is to do so programmatically. See the link that Bergi posted. – Cᴏʀʏ Mar 27 '13 at 22:02
1

@JDelage basically, instead of `
` you want to do `var div = document.getElementById("xyz"); div.onclick = function () { doStuff(this); };` – Norguard Mar 27 '13 at 22:04

score 1 · Answer 3 · answered Mar 27 '13 at 21:59

Use this:

<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>

How to replace Dom element with JS and include an id and a JS function?

3 Answers3

Linked