JavaScriptを使用して要素を書き換えする方法はいくつかあります。
要素の書き換え
記法
// 要素のテキストコンテンツ
取得要素.textContent = “変更テキスト”
// 要素のHTMLコンテンツを変更
取得要素.innerHTML = “<タグ名>テキストなど</タグ名>”;
// 要素の属性を変更(画像の一例)
取得要素.src = “画像URL”;
// 要素の背景色を書き換える(背景画像の一例)
取得要素.style.backgroundColor = “カラーコード”;
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>要素書き換えに関して</title>
</head>
<body>
<p>【要素のテキストコンテンツを変更】</p>
<div id="element1">テキスト</div>
<hr>
<p>【要素のHTMLコンテンツを変更】</p>
<div id="element2">テキスト</div>
<hr>
<div>
<p>【画像Aの要素】</p>
<img id="element3" src="要素AのURL" alt="要素A" width="200" height="200"/>
</div>
<hr>
<div>
<p>【画像Aの要素を変更】</p>
<img id="element4" src="要素AのURL" alt="要素A" width="200" height="200"/>
</div>
<hr />
<p>【要素の背景色を書き換える】</p>
<div id="element5">テキスト</div>
<script src="main.js"></script>
</body>
</html>// 要素のテキストコンテンツを変更
document.getElementById("element1").textContent = "新しいテキスト";
// 要素のHTMLコンテンツを変更
document.getElementById("element2").innerHTML = "<li>新しいHTMLコンテンツ</li>";
// 要素の属性を変更
document.getElementById("element4").src = "要素BのURL";
// 要素の背景色を書き換える
document.getElementById("element5").style.backgroundColor = "#bfdd9e";
出力結果
【要素のテキストコンテンツを変更】
テキスト
【要素のHTMLコンテンツを変更】
テキスト
【画像Aの要素】
【画像Aの要素を変更】
【要素の背景色を書き換える】
テキスト