0

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')
}
1
  • 解決しませんでしたか?別の方法で解決したのであれば、その方法を自分でかいて、それに解決マークを付けておいてください。過去の質問も、解決できてないままで困ってないかなと心配になります。
    – user18851
    Commented 2019年12月2日 11:38

2 件の回答 2

0

もう少し方法がないかなと思って、
本家 で 検索してみたら こういう方法が 紹介されていました。
https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(txt, 'text/html');

これで HTMLDocument が生成されるので その中の body の中の要素を設定します。

var parser = new DOMParser();
var htmlDoc = parser.parseFromString("<table><tr><td>1</td></tr></table>", 'text/html');
outputElement.appendChild(htmlDoc.body.firstChild);

とすると ページ全体の DOM が構築まえでも 指定の エレメントに DOM 構築されたHTMLを設定できるようです。

MDN によると IE10 以降であれば 利用できそうです。

利用する環境が 限定できるなら、当初の目的に一番近い方法だと思います。


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。

https://gist.github.com/1129031


ついでなので 動作確認した コードを連携します。
IE10 でも動作するように JavaScript は書き換えてあります。
IE10,IE11,Chrome,Edge で 同じように動作しました。

test.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>

myChart.js

var outputElement = document.getElementById('output_csv');

function getCsvData() {
    console.log('Start in getCsvData ');
    dataPath = 'data3utf.csv';
    var request = new XMLHttpRequest();
    request.addEventListener('load', function(event) {
        var response = event.target.responseText;
        convertArray(response);
    });
    request.open('GET', dataPath, true);
    request.send();
    console.log('getCSVdata completed');
}

function convertArray(data) {
    console.log('converArray start');
    var dataArray = [];
    var dataString = data.split("\r\n");
    for (var i = 0; i < dataString.length; i++) {
        dataArray[i] = dataString[i].split(',');
    }
    //console.log(dataArray)  // confirmed
    var insertElement = '';
    dataArray.forEach(function (element) {
        insertElement += '<tr>';

        element.forEach(function (childElement) {
            insertElement += '<td>' + childElement + '</td>';
        });
        insertElement += '</tr>';
    });


    insertElement = "<table>" + insertElement + "</table>";
    var parser = new DOMParser();
    var htmlDoc = parser.parseFromString(insertElement, 'text/html');
    outputElement.appendChild(htmlDoc.body.firstChild);
    console.log('outputElement Start');
    console.log(outputElement.innerHTML);
    console.log('outputElement completed');

    console.log('convrtArray completed');
}

function onLoadFunc() {
    console.log('myChart.js started');
    getCsvData();
    console.log('myChart.js completed');
}

data3utf.csv

1,2,3
4
  • すいません、頂いたリンクを見切れていないのですが、 以下のコードを使ってみましたが、まだ動いてくれません。。。 var parser = new DOMParser(); var htmlDoc = parser.parseFromString(insertElement, 'text/html'); outputElement.innerHTML = parser.parseFromString(htmlDoc, 'text/html'); アウトプットは以下の通りです。 //////////////////////////////////////// [object HTMLDocument] /////////////////////////////////////
    – harapeko
    Commented 2019年12月2日 15:27
  • [object HTMLDocument] の表示は HTMLDocument を 文字列変換した時に出るものですね。実行したIEのバージョンを教えてください。
    – user18851
    Commented 2019年12月4日 2:57
  • 1
    サンプルコードが間違っていたので修正しました。もう一度 動作確認してみてください。
    – user18851
    Commented 2019年12月4日 3:25
  • お忙しい中、ありがとうございました。Chromeで動作しました!test.htmlの<table>タグは、動作していなかったんですね。
    – harapeko
    Commented 2019年12月9日 14:36
0

ページ全体の DOM 作成が完了する前に DOM の操作をしようとしているので ちゃんと動作しないようです。
jQeury だとよく

$(function() {
 /* DOM を操作する処理 */
})

という書き方をしますが、DOM 操作できる ちょうどいいくらいのタイミングで
処理が呼ばれるように工夫されています。

今回の場合は

<script src="myChart.js"> </script>
<script>
    window.addEventListener('load', function() {
        console.log('myChart.js started')
        getCsvData();
        console.log('myChart.js completed')
    });       
</script>

と、処理を開始するタイミング を遅くしたら 予期した動作になりました。

DOM 構築前でも

<script>
    document.write("<tr><td>1</td></tr>");
</script>

とすれば HTML を直接出力できるのですが、
csv ファイルを読み込み完了まで待ち合わせる事ができないので
今回のパターンでは使えないと思います。

1
  • window.addEventListener('load', function()  を追加してみましたが結果は変わりませんでした。私のやり方が悪いのか、折角回答頂いたのにすいません。
    – harapeko
    Commented 2019年12月2日 15:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。