本件、恥を忍んでお聞きします。JSについて、一から出直そうと考えていて

document.getElementById("text-button").onclick = function() {
        document.getElementById("text").innerHTML = "クリックされた！";
        console.log("You're getting on my nerves!");
};

という外部JSを、以下のHTML①で読み込んだ際は　無事動作します。世間で推奨されるbodyタグ内最下部での読み込みです。【事例Ａ】

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>トライアル</title>
    <link rel="stylesheet" type="text/css" href="css/test_style.css">

</head>
<body>
<?php

?>
<div id="text-button"><p id="text">クリック</p></div>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html><!DOCTYPE html>

尚、以下HTML②のように、外部JSの読み込み位置をheadタグ内に変更するとJSは動作はしませんでした。【事例Ｂ】

<html>
<head>
    <meta charset="UTF-8">
    <title>トライアル</title>
    <link rel="stylesheet" type="text/css" href="css/test_style.css">
    <script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<?php

?>
<div id="text-button"><p id="text">クリック</p></div>

</body>
</html>

それでは...と思いHTML自体はそのままを維持（headタグ内で外部JSを読み込む）し、外部JS内部を以下のように変更しました。
自分としては「DOM要素の読み込みが完了してから動作させる」の意味合いで、$(function(){を追加したつもりでしたが　やはりJSは動作してくれません。【事例Ｃ】

$(function(){
    document.getElementById("text-button").onclick = function() {
        document.getElementById("text").innerHTML = "クリックされた！";
        console.log("You're getting on my nerves!");
    };
});

====回答のお願い====
事例②のJSが動作しない理由として、JSが読み込まれる時点で該当要素がないから...みたいな説明をよく見るのですが、恥ずかしながら当方は理解できていません。JSがクリックイベントの記述なのでクリックイベント時点で、要素があるか否かが重要でないのか？と思ってしまうわけです。
本件をどう理解すればよろしいのでしょうか？

事例③でもJSが動作しない理由を教えて頂けますでしょうか？
$(function(){の本質の意味を捉えていないのかも知れません。
JQueryの記述をしてしまえば　動くのかも知れませんが、しっかり理解したいので動作しなかった理由をご説明頂けますでしょうか？