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?

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
– JDelage, Commented Mar 27, 2013 at 22:09
Yes, and also stackoverflow.com/questions/6941483/onclick-vs-event-handler . I've added it to my to-do list. Thanks for your patience. ;-) — JDelage
– JDelage, Commented Mar 27, 2013 at 22:24

Cᴏʀʏ · Accepted Answer · 2013-03-27 21:58:04Z

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, 2013 at 21:58

Cᴏʀʏ

108k20 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cᴏʀʏ Over a year ago

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.

LetterEh Over a year ago

@JDelage basically, instead of <div id="xyz" onclick="doStuff(this)"></div> you want to do var div = document.getElementById("xyz"); div.onclick = function () { doStuff(this); };

LetterEh · Accepted Answer · 2013-03-27 21:57:50Z

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, 2013 at 21:57

LetterEh

26.8k5 gold badges45 silver badges52 bronze badges

Comments

Bergi · Accepted Answer · 2013-03-27 21:59:50Z

1

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>

answered Mar 27, 2013 at 21:59

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related