javascriptでhtmlの要素を取得しテキスト書き換えたい。

Question

<button type="submit" class="stripe-button-el" style="visibility: visible;">
<span style="display: block; min-height: 30px;">Pay with Card</span></button>

実現したいこと

ボタンの「Pay with Card」のテキストを書き換えたい。

試したこと

var x = document.getElementsByTagName("button").value= "hello world";

上記のコードでは、要素を取得し、書き換えたいテキストを　.valueを使って試してみたがうまく行かなかった。。

Answer 1

ボタンの「Pay with Card」のテキストはspanタグの中にあるので
buttonではなくspanを指定してください。
テキストの書き換えは.valueではなく.textContentを使用します。

<button type="submit" class="stripe-button-el" style="visibility: visible;">
<span style="display: block; min-height: 30px;">Pay with Card</span></button>
<script>
document.querySelector('span').textContent = 'hello world';
</script>

Answer 2

document.addEventListener( 'DOMContentLoaded' , function( e ) {
	document.querySelector( 'button.stripe-button-el > span' ).innerText = '書き換え';
}, false );
```**動くサンプル：**[https://jsfiddle.net/exv17aur/](https://jsfiddle.net/exv17aur/)

---


【Document.querySelector() - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

【Node.innerText - Web API | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Node/innerText](https://developer.mozilla.org/ja/docs/Web/API/Node/innerText)

Comments

[rails_ruby]

ご教示いただき有難うございます。
勉強になりました。

[yasutomi]

textContentではなくinnerTextを使用する際は
必ずこちらのinnerTextとの違いを読んだ上で
使用したほうが良いです。
https://developer.mozilla.org/ja/docs/Web/API/Node/textContent#Differences_from_innerText

[kei344]

To: yasutomiさん
補足ありがとうございます。基本的に textContent のほうがよさそうですね。

Answer 3

下記のようにできると思います！

<button type="submit" class="stripe-button-el" style="visibility: visible;">
    <span style="display: block; min-height: 30px;" id="hoge">Pay with Card</span>
</button>
<script>
  document.getElementById("hoge").innerText = "hogehoge";
  //or document.querySelector("span").innerText = "hogehoge";
</script>