1

Example:

1) go to www.hotwire.com and confirm that the datepicker for check-in and check-out works

2) open up the console and type in document.body.innerHTML += ""

3) datepicker no longer works

I'm not sure why this is... if you create the element using document.create and append it using document.body.appendChild, the datepicker still works...

1
  • 1
    appendChild doesn't replace all elements on the page with new elements (resulting in lost events). Commented Nov 13, 2012 at 19:03

1 Answer 1

6

When you call el.innerHTML += "", you are essentially doing el.innerHTML = "";el.innerHTML = thehtml, which causes all element data and events to be unbound. That's why plugins and javascript stops working.

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

5 Comments

That is interesting with the unbinding, I have come across using innerHTML before and didn't think it removed attributes. Can you expand a little on that please?
It doesn't remove attributes, it removes events bound with javascript. Your onclick="" events will still work.
When you said element data I took that to mean attributes. What did you mean by element data and can you explain why it removes the bound events (not trying to nitpick, just curious).
When you bind an event to an element using javascript, that event is bound to the DOM Node that represents the element. When the DOM Node is removed, the event is also removed because it is no longer needed (and because it was stored on the node).
As far as additional data, i meant more along the lines of node.dataset data. I'm not sure if jQuery cleans up it's data if elements are removed with innerHTML directly, more than likely it doesn't.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.