メモしよっと

なんでもメモするブログです。

テキストノードの取得と変更 - JQuery

やり方

例えば下記HTMLのように、要素の中に要素とテキストがあり、テキストだけ変更したいときのやり方。

<a href="" id="example"><img src="icon.svg" alt="">メッセージ</a>

テキストノードの取得と変更

contents()

メソッドを使って、 id="example"のテキストノードを含めた全要素を取得します。 要素を精査し、nodeTypeが3かつ変更したいテキストであれば、this.textContentを新しいテキストで書き換えます。

  $('#example').contents().each(function() {
    if (this.nodeType === 3 && this.textContent.trim() === 'メッセージ') {
      this.textContent = 'お返事';
    }
  });

※nodeType: 3 は、テキストノードです。