Javascriptによるテキストの変更について

Question

はじめまして。

現在、JavaScriptを使用して、UserScriptを作成したいと考えています。
その中で、あるhtmlのDOMのテキストを変更したいと考えていますが上手く行かないです。
解決策をご教授いただけないでしょうか。

前提・実現したいこと

実現したいこと(大枠)：ドロップダウンメニューに項目を追加したい
(現在hoge1, hoge2→ hoge1, hoge2, hoge3にしたい)
考えたこと：まず、既存のドロップダウンメニューのhoge1をコピーし、その後、そのDOMの内容を変更(hoge1→hoge3)し、追加する。

発生している問題・エラーメッセージ

既存のページから下記のコードを実行しhoge1を取得しました。

whole_hoge = document.getElementsByClassName("dropdown-menu")[1];
hoge1 = whole_hoge.getElementsByTagName("li")[0];
clone_hoge1 = hoge1.cloneNode(true);

clone_hoge1として取得した内容が下記になります。

<li>
  <a href="hoge">
    <span class="hoge" aria-hidden="true"></span> 
      hoge1
  </a>
</li>

やりたい形はこうです。

<li>
  <a href="hoge">
    <span class="hoge" aria-hidden="true"></span> 
      hoge3<!--とりあえず、ここの文言のみを変更したい。-->
  </a>
</li>

やったこと

clone_hoge1 .innertText = "hoge3";

結果(失敗)

<li>
  hoge3 <!-- hoge3のみになってしまっている -->
</li>

補足情報

初学者のため、(言い訳ですが・・・)質問文の中で単語の意味を間違って使っていたり、構文がおかしかったりしていると思います。ごめんなさい。

欲しい情報等ありましたら、別途質問していただけますでしょうか。よろしくお願いしますm(_ _)m

Comments

[dice142]

JSのhoge.innerTextのhogeとはどう宣言したものでしょうか？

[_TM]

すみません。自分の質問の仕方が悪すぎました。
質問内容を修正させていただきます。ごめんなさい。。。

Answer 1

タグ追加無しが条件であれば、以下のように出来ます。

    var whole_hoge = document.getElementsByClassName("dropdown-menu")[1];
    var hoge1 = whole_hoge.getElementsByTagName("li")[0];
    hoge1.querySelector('span.hoge').nextSibling.textContent = 'hoge3';

対象要素を取得する場合、getElementsByClassNameより、querySelectorを使った方が今風かと。

Comments

[_TM]

なるほど、querySelectorですか。確かにすっきり書けそうに思います。
帰ったらリファクタリングしてみようと思います。ご教授ありがとうございました！m(_ _)m

Answer 2

このあたりの解説が詳しいですが、私ならHTMLのほうでSPAN要素でくくってしまうと思います。

【二章第三回　基本的な操作とテキストノード — JavaScript初級者から中級者になろう — uhyohyo.net】
https://uhyohyo.net/javascript/2_3.html

Comments

[_TM]

回答ありがとうございます！
参考サイトも併せて確認させていただきます＞＜

Answer 3

<span>の中に入れましょう

<span class="hoge">hogehoge</span> 

Comments

[_TM]

回答ありがとうございます！
すみません。自分の質問の仕方が悪すぎたので、質問内容を修正させていただきます。ちょっとお待ちいただけますか・・・＞＜

Answer 4

取得している要素は<li>タグの要素なので、
そのままinnerTextを書き換えるとそうなります。

本来書き換えたい要素は<a>タグの要素なので、
取得した要素のさらに子要素を取得する必要があります。

例えば下記のような感じです。

var whole_hoge = document.getElementsByClassName("dropdown-menu")[1];
var hoge1 = whole_hoge.getElementsByTagName("li")[0];
var clone_hoge1 = hoge1.cloneNode(true);
clone_hoge1.firstElementChild.innerText = "hoge3"; // ★ここ！
whole_hoge.appendChild(clone_hoge1);

実際に動くサンプル
ボタンで追加するようにしたやつ

Comments

[_TM]

サンプルまですみません＞＜帰ったらさっそく試してみます。firstElementChildなんてものもあるのですね。勉強になりました！ありがとうございます！