<span id="ID" onClick="alertIt(this.id);">

    <p>Some string with special chars: ~!@#&*()}{>?>?>|{">@#$#^#$</p>

    <p>Why when clicket it gives something like this, and how to display it as oryginal:</p>

    <p>'<br>
    Some string with special chars: ~!@#&*()}{>?>?>|... and so on
    <br>'</p>

</span>

<script type="text/javascript">

function alertIt(ID)
{

    var ID = ID;
    var content = document.getElementById(ID).innerHTML;

    alert(content);

}

</script>