使用document.getElementById替换innerHTML时发生意外行为

Question

What am I doing wrong in the following? I would like to replace only the content of a div, but the content of the whole page is changed.

Why is the link "Next" disappearing when "Second page" is displayed?

<div id = "notes">
 <p>First page</p>
</div>

<a href="javascript:document.getElementById('notes').innerHTML = '<h1>Second page</h1>'">Next</a>

Answer 1

Navigating to a javascript: URI will display the result of the script.

The assignment operator evaluates to the value assigned, so you end up navigating to that chunk of HTML directly.

To prevent this, wrap your expression in the void() operator so that it will have no value.