offenbaren, ohne Seite neu laden JavaScript

Question

Ist es möglich, einen Absatz oder eine Textzeile mit einem div onClick mit Javascript hinzuzufügen, ohne die Seite neu zu laden?

<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

Sie können jQuery für Dom-Manipulation verwenden. Bellow ist der JQuery-Code und wenig modifizierte HMTL.

Die jquery

$(document).ready(function() { 

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

und HTML ist

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

Answer 2

Sie müssen sich zuerst der onclik von a eine Funktion aufzurufen. Seit seiner a Tag werden wir preventDefault so die Seite nicht umleiten, falls Sie eine href hinzufügen.

Klicken Sie auf mich!

Dann in reveal Funktion schreiben wir einen einfachen Code, um eine Textzeile anzuzeigen.

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

Wenn Sie mehrmals klicken, dann werden mehrere p Tag der div hinzugefügt werden.