jsファイルでファイル処理をし、htmlでプログラムの中をみれないようにしたいとかんがえていますが、jsファイルで処理をすると、タグが消える現象がおきています。
Console機能を使い、処理を確認すると、innerHTMLの値はjs上では、タグを含んで出力しておりますが、htmlのファイルになると、tagが消えてしまいます。
insertAdjacentHTMLを使う方法も試しましたが、同様の症状がでてしまいました。
解決方法あれば、ご指導をお願いします。
■html
<!DOCTYPE html>
<head>
<meta charset="Shift_jis">
<title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->
<br>
<br>
////////////////////////////////////////
<table border="1" >
<tbody >
<div id="output_csv"></div>
<script src="myChart.js"> </script>
<script>
console.log('myChart.js started')
getCsvData();
console.log('myChart.js completed')
</script>
</tbody>
</table>
/////////////////////////////////////
<br>
テスト
</body>
</html>
■JSファイル
const outputElement = document.getElementById('output_csv');
function getCsvData() {
console.log('Start in getCsvData ')
dataPath = 'data3utf.csv';
const request = new XMLHttpRequest();
request.addEventListener('load', (event) => {
const response = event.target.responseText;
convertArray(response);
});
request.open('GET', dataPath, true);
request.send();
console.log('getCSVdata completed')
}
function convertArray(data) {
console.log('converArray start')
const dataArray = [];
const dataString = data.split("\r\n");
for (let i = 0; i < dataString.length; i++) {
dataArray[i] = dataString[i].split(',');
}
//console.log(dataArray) // confirmed
let insertElement = '';
dataArray.forEach((element) => {
insertElement += '<tr>';
element.forEach((childElement) => {
insertElement += `<td>${childElement}</td>`
});
insertElement += '</tr>';
});
outputElement.innerHTML = insertElement;
console.log('outputElement Start')
console.log( outputElement.innerHTML )
console.log('outputElement completed')
console.log('convrtArray completed')
}