innerHTMLの代わりに要素の中身を空にする方法

前提・実現したいこと

要素を空にする方法として、innerHTMLと同等の結果を得られるメソッドなどがありましたら教えて欲しいです

今回、FizzNumとBuzzNumに値を入力し、「実行」ボタンを押した際には値が出力されるのですが、再度実行ボタンを押した際に、値が書き換わらないといった現象が発生してしまいました。
その為以下の処理を加えたのですが、出来ましたらtag_p.innerHTML = '';ここの部分をinnerHTMLを使用せずに実現したいと考えています。

if(tag_p){
      console.log('tag_p');
      tag_p.innerHTML = '';
    }

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel=”stylesheet” type="text/css" href="css/kadai-2.css">
7  <title>FizzBuzz</title>
8</head>
9<body>
10  <h1>FizzBuzz問題</h1>
11  <p>
12    FizzNum:
13    <input type="text" id="fizz_num">
14  </p>
15  <p>
16    BuzzNum:
17    <input type="text" id="buzz_num">
18  </p>
19  <input type="button" id="button" value="実行">
20  <p id="output_title">【出力】</p>
21  <p id="tag_p"></p>
22</body>
23<script type="text/javascript" src="js/kadai-2.js"></script>
24</html>

js
1'use strict';
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector("#button").addEventListener('click',function(){
4    if(tag_p){
5      console.log('tag_p');
6      tag_p.innerHTML = '';
7    }
8    let fizz_num = document.getElementById("fizz_num").value;
9    let buzz_num = document.getElementById("buzz_num").value;
10    let err_msg = '';
11    let empty_err = false;
12    if(fizz_num === '' || buzz_num === ''){
13      err_msg = '1以上99以下の整数を入力してください'
14      empty_err = true;
15    }
16    if(empty_err === false){
17      fizz_num = Number(fizz_num);
18      buzz_num = Number(buzz_num);
19      if(fizz_num || buzz_num){
20        if(!Number.isInteger(fizz_num) || !Number.isInteger(buzz_num) ){
21          err_msg = '1以上99以下の整数を入力してください';
22        }
23      }else{
24        err_msg = '1以上99以下の整数を入力してください';
25      }
26    }
27    console.log('ok')
28    if(err_msg){
29      let tag_p = document.getElementById("tag_p");
30      let display_err_msg = document.createTextNode(err_msg);
31      tag_p.appendChild(display_err_msg);
32    }
33    if(!err_msg){
34      let display_fizz_value = '';
35      let display_buzz_value = '';
36      let display_fizz_buzz_value = '';
37      for(let i = 1; i < 100; i++){
38        if(i % fizz_num === 0 && i % buzz_num === 0){
39          display_fizz_buzz_value = document.createTextNode(`FizzBuzz: ${i}`);
40          tag_p.appendChild(document.createElement("BR"));
41          tag_p.appendChild(display_fizz_buzz_value);
42        }else if(i % fizz_num === 0){
43          display_fizz_value = document.createTextNode(`Fizz: ${i}`);
44          tag_p.appendChild(document.createElement("BR"));
45          tag_p.appendChild(display_fizz_value);
46        }else if(i % buzz_num === 0){
47          display_buzz_value = document.createTextNode(`Buzz: ${i}`);
48          tag_p.appendChild(document.createElement("BR"));
49          tag_p.appendChild(display_buzz_value);
50        }
51      }
52    }
53  })
54})

試したこと

tag_p.remove()やtag_p.empty()を試しましたが、実行ボタンを押した際に値が出力されませんでした。

どなたか、ご助言頂けましたら幸いです。

m.ts10806

2020/12/09 01:54

一応、 innerHTMLはメソッドではなくプロパティです。 https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML textContentではだめでしょうか。 https://developer.mozilla.org/ja/docs/Web/API/Node/textContent というかそもそもなぜ使いたくないのか前提や背景を記載してください。要件満たせるなら手段は問わないのが通常かと思います。

YT0014

2020/12/09 07:56

'tag_p'は、コンソールへ出力されているのでしょうか？ innerHTMLやremove()、empty()が動作しないのではなく、直前のifが成立しないので、呼ばれていないように思えるのですが。

YT0014

2020/12/09 08:06

click時の処理の先頭に、if(tag_p)とありますが、宣言も代入もされていないのですが、ifの中は、ちゃんと呼ばれているのでしょうか？

ruuuu

2020/12/09 10:59

> innerHTMLやremove()、empty()が動作しないのではなく、直前のifが成立しないので、呼ばれていないように思えるのですが。 innerHTMLの場合は問題なく動作していました！ >textContentではだめでしょうか。 textContentで、代替可能であった為、こちらを使用したいと思います。