显示而不重新加载页面javascript

Question

Is it possible to add a paragraph or line of text using a div onClick using javascript, without reloading the page?

<a onclick="reveal">Click me!</a>
  <div id="vTitle">
      <!-- show text in this div -->
  </div>

<script type="text/javascript">
  if (onclick == "reveal"){
    var newListItem = document.createElement('p');
    var newListItemText = document.createTextNode('Vualà');
    newListItem.appendChild(newListItemText);
    var newListItemPosition = document.getElementById('vTitle');
    newListItemPosition.appendChild(newListItem);
    }
</script>

Answer 1

You can use jquery for dom manipulation. Bellow is the jquery code and little modified hmtl.

The jquery

$(document).ready(function () {

        $("#reveal").on('click', function (e) {
            e.preventDefault();
            $("#vTitle").append("<p>Test</p>");
        });
 });

And Html is

<a id="reveal">Click me!</a>
<div id="vTitle">
    <!-- show text in this div -->
</div>

Answer 2

You have to first call an function in the onclik of a . Since its a tag, we will have to preventDefault so the page does not redirect in case you add a href to it.

Click me!

Then in reveal function we write a simple code to show a line of text.

<script type="text/javascript">
 function reveal(e) {
    e.preventDefault();
    var newListItem = document.createElement('p');
    var newListItemText = document.createTextNode('Vualà');
    newListItem.appendChild(newListItemText);
    var newListItemPosition = document.getElementById('vTitle');
    newListItemPosition.appendChild(newListItem);
 }
</script>

If you click multiple times, then multiple p tag will be added to the div .