如何使用JavaScript嵌入html div？

Question

我想提供简单的网络服务，并允许任何人使用JavaScript将其嵌入任何网站。

该服务是为静态网站或任何想要使用JavaScript显示IP地址而非服务器端脚本的人提供访客IP地址。

我的代码是：

<div style="white-space:normal; display:inline-block;background-color:white">
Your IP Address is: <br><strong>
{ip}</strong><br>Country:{country}<br>
ISP:{isp}
</div>

屏幕截图：

我可以使用document.write()并输出此内容，但我不确定它是最佳选择，还是使用其他方法（如appendChild）来表示父元素？ 最后一点，我应该在window.onload()之间附上脚本吗？

Answer 1

你可以使用好的旧VanillaJS。只需给它一个ID，然后改变它的innerHTML ..它基本上是Javascript DOM。它会更改实际的html了解详情here。

document.getElementById("IP").innerHTML = "XXX.XXXXX.XXXX";
document.getElementById("Country").innerHTML= "U.S.A";
document.getElementById("ISP").innerHTML= "ISP Name";

<div style="white-space:normal; display:inline-block;background-color:white">
Your IP Address is: <span id="IP"></span><br>
Country:<span id="Country">{country}</span><br>
ISP:<span id="ISP">{isp}</span><br>
  
</div>

所以我通过做通常的document.getElementById得到了id。然后你可以通过做.innerHTML改变它的innerHTML。

修改
Here是一个codepen！

EDIT2

所以现在我明白你想用document.write（）;好吧，它会有点单调乏味，但这对整体结果来说很可取..：

<h1>Representation</h1>
<div style="white-space:normal; display:inline-block;background-color:white">
  Your IP Address is: <span id="IP">
<script>
document.write("XXX.XXXXX.XXXX");
</script></span>
  <br>Country:
  <span id="Country"><script>
document.write("U.S.A");
</script></span>
  <br>ISP:
  <span id="ISP"><script>
document.write("ISP Name");
</script></span>
  <br>

</div>