Skip to main content
4 / 4
動作確認コード追加
user18851
  • 1,238
  • 8
  • 6

もう少し方法がないかなと思って、
本家 で 検索してみたら こういう方法が 紹介されていました。
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
user18851
  • 1,238
  • 8
  • 6