如何通过 Javascript 添加 HTML 小部件？

Question

当您在 html 文件中复制并粘贴 tradingview 图表小部件 HTML 代码（如下所列）时，图表小部件会出现，但是我需要通过 javascript 添加此小部件代码，因为在我的项目中我需要更改基于资产的小部件由用户。 所以我需要销毁当前的小部件并通过 javascript 添加一个新的小部件，我正在努力做到这一点，这是 tradingview 小部件 HTML 代码：

<div class="tradingview-widget-container" style="height: 100%;">
    <div id="tradingview_fb869" style="height: 100%;"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
    new TradingView.widget(
    {
    "autosize": true,
    "symbol": "BINANCE:ADABTC",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "save_image":false,
    "container_id": "tradingview_fb869"
    }
    );
    </script>
    </div>

我试图通过 javascript 通过将div元素的 innerHTML 更改为小部件代码字符串以编程方式添加此小部件，但没有成功：

var widgetCode=`
    <div class="tradingview-widget-container" style="height: 100%;">
    <div id="tradingview_fb869" style="height: 100%;"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">AAPL Chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script type="text/javascript">
    new TradingView.widget(
    {
    "autosize": true,
    "symbol": "BINANCE:ADABTC",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "save_image":false,
    "container_id": "tradingview_fb869"
    }
    );
    </script>
    </div>
    `;
    document.getElementById("widgetDiv").innerHTML=widgetCode;

所以我问我如何用 javascript 创建这个小部件？

Answer 1

您应该再添加几行代码。 我猜你忘了在你的图表 div 中添加 id 属性你可以在这个链接上得到一个适合你的示例。

   <html>
  <head>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <script>
   
      var fxWidget = new TradingView.widget({
     "autosize": true,
    "symbol": "BINANCE:ADABTC",
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "light",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "save_image":false,
    "container_id": "tradingview_fb869"
    }); 
        document.getElementById("fxWidget").innerHTML=fxWidget;

    </script>
  </head>
  <body>
  <div id="fxWidget"></div>
  </body>
</html>

如何通过 Javascript 添加 HTML 小部件？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-17 14:01:33

如何通过 Javascript 添加 HTML 小部件？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-17 14:01:33

解决方案1
0 已采纳 2020-12-17 14:01:33