テンプレートリテラルを使うと動的に値を置き換えることが出来て、しかもスマートにコーディングできます。
以下、サンプルを載せておきます。
Sample.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
//DOMContentLoadedイベントでWebページのロードを実行する。
document.addEventListener('DOMContentLoaded',function(){
//ID=dataSubmitが付与されたタグを特定する。
let submitBtn = document.getElementById('dataSubmit');
//入力ボタンのクリックイベントをaddEventListenerメソッドを使ってイベントリスナーを登録する。
submitBtn.addEventListener('click',()=>{
//入力情報の入ったinputタグのIDを取得し、変数inputDataに格納する。
let inputData = document.getElementById('inputTxt');
//inputタグに入力されている値をvalueプロパティを使って取得し、変数inputDataTxtに格納する。
let inputDataTxt = inputData.value;
//変数inputDataTxtに格納されている値がnull出ない場合、入力内容を表示し、アラートメッセージにも入力内容を表示する。
if(inputDataTxt != null)
{
//ID=resultDataが付与されたタグを特定する。
let resultData = document.getElementById('resultData');
//ID=resultDataが付与されたdivタグに入力欄で取得した値を入れる。
resultData.innerText = inputDataTxt;
//テンプレートリテラル文字列を入力欄で取得した値に置き換え、アラート表示する。
alert(`入力内容：${inputDataTxt}`);
}
});
},false);
</script>
<body>
<div class="tempClass" id="temp">
<div class="inputTxtAreaClass" id="inputTxtArea">
<input type="text" name="inputTxt" class="inputTxtClass" id="inputTxt">
</div>
<div class="dataSubmitAreaClass">
<div class="dataSubmitTitleClass">
<button type="button" class="dataSubmitClass" id="dataSubmit">
入力内容を表示する
</button>
</div>
</div>
<!--結果を表示するエリア-->
<div class="resultAreaClass">
<div class="resultClass" id="resultData">
</div>
</div>
</div>
</body>
</html>
【参考にしたサイト】
①【JS】addEventListenerが機能しない理由についてご教示ください
URL:https://teratail.com/questions/24714
②Window: DOMContentLoaded イベント
URL:https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event