Question

我还在学习javascript。

这是我正在玩的网站。 http://keysoft.keydesign-themes.com/demo1/

我想使用DOM操作（insertAdjacentHTML）将Google可视化图表代码插入此站点。

以下是谷歌时间表图表的代码：

      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="timeline" style="height: 180px;"></div>

我在Chrome控制台中尝试了以下代码，以便将其插入此网站，但我认为存在很多错误。你能帮我解决一下如何改进下面的代码吗？

document.getElementsByClassName('container')[5].getElementsByClassName('row')[0].insertAdjacentHTML('afterend', '<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="timeline" style="height: 180px;"></div>

      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }');

Answer 1

您可以使用反向标记（`）而不是单引号将其转换为字符串文字。并且为了确保它不会堵塞脚本标记，您需要将文字内的结束脚本标记更改为

<\/script>

我不知道HTML结构的其余部分，因此在选择要将标记放入其中的元素时可能会出现一些问题。

以下是一个适合我的简单页面的完整示例：

</head>
<body>
    <div id="container" class='container'>
        <div class="row"></div>
    </div>
</body>

<script>'use strict';
        document.getElementsByClassName('container')[0].getElementsByClassName('row')[0].insertAdjacentHTML('afterend', `<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"><\/script>
              <div id="timeline" style="height: 180px;"></div>\n\n      <script> google.charts.load(\'current\', {\'packages\':[\'timeline\']});
              google.charts.setOnLoadCallback(drawChart);
               function drawChart() {
                   var container = document.getElementById(\'timeline\');
                   var chart = new google.visualization.Timeline(container);
                    var dataTable = new google.visualization.DataTable();
                    dataTable.addColumn({ type: \'string\', id: \'President\' });
                    dataTable.addColumn({ type: \'date\', id: \'Start\' });
                    dataTable.addColumn({ type: \'date\', id: \'End\' });
                    dataTable.addRows([
                         [ \'Washington\', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
                         [ \'Adams\',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
                         [ \'Jefferson\',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
                         chart.draw(dataTable);
                         }<\/script>`);
    </script>

为了简单起见，我将容器的数量从5更改为0但是在浏览器中运行时没有问题，并在行元素之后注入JS代码。后面的滴答声（`）非常重要。

如何使用DOM操作插入复杂的代码

1 个答案: