Skip to main content
動作確認コード追加
ソース リンク
user18851
  • 1,238
  • 8
  • 6

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

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

https://gist.github.com/1129031


ついでなので 動作確認した コードを連携します。
[IE1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility0 でも動作するように 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

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

MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
 https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

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
BODY の値を設定するようにコード修正
ソース リンク
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');

生成した HTML 文字列これで HTMLDocument が生成されるので その中の body の中の要素設定します。

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

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

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

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


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

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

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

生成した HTML 文字列

outputElement.innerHTML = parser.parseFromString(insertElement, 'text/html');

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

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

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


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

もう少し方法がないかなと思って、
本家 で 検索してみたら こういう方法が 紹介されていました。
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 によると][1] IE10 以降であれば 利用できそうです。

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


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

サンプルコードについての情報追記
ソース リンク
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');

生成した HTML 文字列を

outputElement.innerHTML = parser.parseFromString(insertElement, 'text/html');

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

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

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


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

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

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

生成した HTML 文字列を

outputElement.innerHTML = parser.parseFromString(insertElement, 'text/html');

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

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

利用する環境が 限定できるなら、当初の目的に一番近い方法だと思います。
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

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

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

生成した HTML 文字列を

outputElement.innerHTML = parser.parseFromString(insertElement, 'text/html');

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

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

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


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

ソース リンク
user18851
  • 1,238
  • 8
  • 6
読み込んでいます