2016-03-28 6 views
-1

JavaScriptを使用してスパンの内容をクラス名で変更する必要があります。これは基本的なサイトであり、jQueryファイルをロードしていないので、私はjQueryよりもJavaScriptを優先しています。ここで私が試したものです:JavaScriptでスパンクラスの内容を変更する

HTML:ここ 何とか何とか何とか新しいテキスト何とか何とか:それはとして表示望ん

document.getElementsByClassName('.new')[0].innerHTML = 'new text here'; 

:外部JavaScriptファイル内

blah blah blah <span class="new"></span> blah blah blah 

のJavaScript blah

検索しましたが、ElementIDソリューションしか見つかりませんでした。

+2

ドットなしの '.new''なので' document.getElementsByClassName( 'new')[0] .innerHTML' –

+0

私はドットを削除しましたが、それでも動作しません。私も言及すべきでしたが、私はそれを試みました。タグの直前にロードされた外部jsファイルがあるということは違いがありますか?または[0]かもしれない?注:jsファイルの他のすべてのスクリプトは正常に動作しているので、ロードしています。 – midknyte

+0

[this fiddle](https://jsfiddle.net/4castle/2rz96p6q/)によるとうまくいきます。あなたの問題を再現するいくつかのコードを提供できますか? – 4castle

答えて

1

同じホスト上の別のサイトでコードを試しても、動作しませんでした。私は彼らのホスト内の似たようなサイトで見つかった要素IDコードに基づいてコードを変更していないし、これは働いていた:

var newText = document.getElementsByClassName('new')[0]; 
newText.innerHTML = 'new text here'; 

ませアイデアなぜ、これは働いていました。回答ありがとう!

+0

私はなぜそれを知っていると思う。 [この質問](http://stackoverflow.com/questions/28163033/when-is-nodelist-live-and-when-is-it-static)を参照してください。最も安定した予測可能なソリューションが必要な場合は、 'onload'イベントを使用してください。 – 4castle

1

新しいものの前にピリオドを入れないでください。

document.getElementsByClassName('new')[0].innerHTML = 'new text here';

+0

上記に新しいコメントが追加されました。ありがとう。 – midknyte

0

'.new'からドット.を削除します。これは、関数がクラスを探すだけであることを意味します。

更新this questionによると、はい、それは一番下にJavaScriptコードを置くことは、まだ常にDOMが完全にロードであることを保証するだけでは十分ではない可能性があります。 document.onloadの後に交換する必要があります。

document.onload = function() { 
    document.getElementsByClassName('.new')[0].innerHTML = 'new text here'; 
} 
+0

上記に新しいコメントが追加されました。ありがとう。 – midknyte

+0

あなたの問題に対処するために私の答えを更新しました。 – 4castle

+0

ありがとう。理由はわかりませんが、変数を使用しています。 – midknyte

-1

既に述べたように、セレクタからドット( '。')を削除します。あなたがそのようなクラスを選択したい場合 は、私はあなたがほとんど存在し、ジャストclass nameから.を削除document.querySelectorかdocument.querySelectorAll :)

+0

それは貧しい決断です。'querySelector'関数は非常に遅く、ここでは必要ありません。 – 4castle

+0

上記に新しいコメントが追加されました。ありがとう。 – midknyte

2

を使用してお勧めします。 理由は、getElementsByClassNameメソッドを呼び出すときです。ドキュメント全体でクラス名のみを検索します。したがって、クラス名の前に.を入れる必要はありません。

document.getElementsByClassName('new')[0].innerHTML = 'new text here'; 
+0

説明をいただきありがとうございます。 – midknyte

+0

うれしいです。 @midknyte –

関連する問題