id・クラスの要素を取得する
以下のdocumentオブジェクトでHTMLのID名を持つ要素を丸ごと取得することができます。シングルクォートでもダブルクォートでも構いません。
document.getElementById(`ID名`);ちなみに、特定のクラス名を持つ要素を丸ごと取得するメソッドも準備されています。
document.getElementsByClassName(`クラス名`);要素の中身を書き換える
要素の中身を書き換えるにはtextContentメソッドが使われます。「取得した要素.textContent = 変更した文字列」と書くだけです。
<<p id="choice">
この文字列を変換します。
</p>document.getElementById(`choice`).textContent = "はーい"ブラウザ上の表示では、「この文字列を変換します」が「はーい」に置き換わっています。
関数とdocument.getElementById()を組み合わせる
<p id = foods>食べ物の値段は○○円です</p>//税込み価格を計算する関数tax
function tax(price){
return price + price * 0.1
}
//200円の商品の税込み価格を出力する
document.getElementById("foods").textContent = "食べ物の値段は"+ tax(200) + "円です";