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

Question

当您在 html 文件中复制并粘贴 tradingview 图表小部件 HTML 代码（如下所列）时，会出现图表小部件，但是我需要通过 [=24 添加此小部件代码=] 因为在我的项目中，我需要小部件根据用户点击的资产进行更改。所以我需要销毁当前的小部件并通过 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 元素的内部 HTML 更改为小部件代码字符串，但没有成功：

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 属性您可以在 this link.

获取适合您的示例

   <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 小部件？

How to add an HTML widget through Javascript?

html

javascript

widget