jquery セレクタについて

Question

お世話になります。

初歩的な質問で恐縮ですが、以下の内容に行き詰っています。
皆様のお知恵をお借りできればと思います！

###前提・実現したいこと
以下のHTMLコードを理想の結果にするのが今回のお題です。
※id=div1のテキストをhogeに変更

問題のソースコードを実行すると、子供要素もそのまま書き換わってしまうため、理想としている結果にはなりません。
セレクタで親要素だけを指定し、親要素のテキストだけを変更することはできるのでしょうか？

また、今回のソースコードは簡易的なものなので、html()で要素丸ごと記述し直す。みたいな力技はあまりしたくありません。
どうぞよろしくお願いします！

###ソースコード

<div id='div1'>
    test
    <div id='div2'>
        test1
    </div>
</div>

###理想の結果

<div id='div1'>
    hoge <!-- 変更点 -->
    <div id='div2'>
        test1
    </div>
</div>

###問題のソースコード

$("#div1").text("hoge"); //実行結果：<div id="div">hoge</div>

Answer 1

TEXT_NODE の操作なら jQuery を使わない方がスマートに書けます。

document.getElementById('div1').firstChild.data = 'hoge';

Comments

[S.T]

回答ありがとうございます！

そんな方法があったとは知りませんでした＞＜
Jqueryに依存するのも良くないですね
ありがとうございました！

Answer 2

$("#div1").contents().filter(function(){
    return this.nodeType !== 1;
  }).eq(0).after('hoge').remove();

自分で書いておいて言うのもなんですが、すげえ気持ち悪い書き方ですねこれ。

Comments

[S.T]

回答ありがとうございます！

Jqueryでもそういった方法があったんですね！
参考にさせてもらいたいと思います＾＾
ありがとうございます！