javascript - 将脚本传递给 innerHTML

Question

在您将其标记为重复之前，我已经查看了 here , as well , here too ，但我似乎找不到可行的解决方案。我知道由于脚本标签，我无法将脚本传递给 innerHTML。但是有没有一种方法可以将这个特定的 API 插入 div 而无需将其放入 HTML 页面。我有一个按钮接受输入并运行几个 $.get 来获取股票信息，所以我想将其作为结果的一部分包括在内，但是，不允许使用 innerHTML，我已经尝试了很多解决方案上面的链接无效。
我可以将下面的脚本放在 HTML 页面的 div 中，但我不想这样做，而且我需要获得用户输入，因此将它放在我的 .js 中会更容易一起执行所有功能。我包含了小部件的 js。

<script type="text/javascript">
new TradingView.widget({
  "width": 480,
  "height": 400,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "White",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "hide_top_toolbar": true,
  "save_image": false,
  "hideideas": true
});
</script>

到目前为止我有

var script = document.createElement('script');
script[(script.innerText===undefined?"textContent":"innerText")] = "new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:"+ticker+ "','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});";
document.getElementById("stockChart").appendChild(script);

这项工作但不是我想要的，但是，这只是执行该脚本并且该图表是页面上唯一显示的内容，有没有办法我可以强制它在 <div> 中？上面的方案，执行了脚本，但是并没有把widget放在div里面(貌似，我可能是错的，这方面我不精通)。

在这张图片中，当我用 JS 文件运行脚本和其他操作时，它只是在页面上单独显示图形。

这是当代码在 div 中并且在运行任何 JS 函数之前，我猜它在 div 中，但是，我需要在上面的框中输入一个输入，以便所有信息都可以显示在一个页面上，如下所示

我希望图表位于红点中，即 <div>是

HTML

<div id="content">
          <img src="icon/logo.png">
          <h1>Search Shares</h1>
          <div id="stockTickGet">
            Ticker: <input type="text" id="tickBox" list="options"/>
            <button onclick="Ticker()" id="tickerSubmit" class="btn btn-primary">Submit</button>
            <datalist id="options"></datalist>
          </div>
          <div id='showStockTick' class='stockTicker'></div>
          <!-- <div id='stockChart'></div> -->
          <div id='stockChart'>
          </div>      
          <div id='showStockSearch' class='stockTicker'></div>
          <div id='newsresult' class='stockTicker'></div>

          <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Buy Stocks</button>

        </div>

从某种意义上说，这就是我想做的，但不允许/工作

document.getElementById("stockChart").innerHTML = "<script> new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:GOOG','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});<"+"/script>";

Answer 1

虽然脚本可以放在 div 中，但这里的误解似乎是您可以为脚本生成的任何 html 选择目标 div。

如果没有看到脚本代码或者至少不知道脚本做了什么，就不可能说脚本是否生成任何 html 元素，或者即使它生成了，您也不知道它是如何将这些元素注入(inject)当前页面的。

新的 TradingView.widget(..)。即使您将其作为脚本元素放置在页面的 html 元素上，它也可能会跳吉格舞并煮炖菜。

至于你的问题的解决方案:

我搜索了 Tradingview.widget 并找到了这个页面:www.tradingview.com。这似乎是你在说什么。查看页面源代码，您似乎可以将 container_id 添加到小部件选项:

new TradingView.widget({
     ...
     container_id : "widget-frame-container";
});

这意味着如果你有一个带有所述 id 的 div:

<div id="widget-frame-container"></div>

然后我会假设脚本生成的任何内容都将被注入(inject)到那里。

---

很抱歉没有测试并给出了半信半疑的答案!