Javascript 一次加载HTML对象并多次使用

我尝试多次将单个SVG文件作为HTML对象标记加载，并使用JavaScript编写负责对象放置的HTML。但是，每次JavaScript写入页面时，对象都会加载一个单独的副本

有没有办法加载一次，然后多次引用该副本

下面是我正在做的一个示例（假设在加载div之后调用javascript）：

（函数（）{
var foo=document.getElementById（“foo”）；
变量numberOfElements=10；
对于（var i=0；i

标题

一次添加所有HTML代码即可。 否则，您会告诉浏览器10次，DOM中有更改，它会立即开始验证、引用和渲染它。 希望这将使用浏览器文件缓存来存储“someSVG.svg”

（函数（）{
var foo=document.getElementById（“foo”）；
变量numberOfElements=10；
var content=”“；//临时字符串，开始为空
对于（var i=0；i

---

这似乎是由于元素引起的。 如果您切换到，它也可以处理SVG。它像一个符咒一样工作，并使用缓存的src

你能吗

   foo.innerHTML += '<img height="10px" width="10px" src="http://upload.wikimedia.org/wikipedia/en/2/24/WWF_logo.svg"/>'

foo.innerHTML+=''

请参阅此代码段：

（函数（）{
var foo=document.getElementById（“foo”）；
变量numberOfElements=10；
var content=”“；//临时字符串，开始为空
内容+=
'';
foo.innerHTML+=content；//在循环外部追加一次
var元素=document.querySelector（'#foo img'）；
对于（var i=0；i

---

你可以给我们看一些代码。@RobertMoskal当然可以。我想这是常见的浏览器行为。您的“foo.innerHTML”告诉浏览器：DOM中的某些内容已更改。请立即进行验证、引用和渲染。就你而言。。。10次。当您将此对象的10倍硬编码到源代码时，也会发生相同的行为。所以它与JavaScript.Ok无关。我更新了它，现在它以一个空字符串开始。以前的版本将“未定义”变量与“”字符串连接在一起。现在，使用HTML代码片段，上面的代码演示将运行。我想我应该更具体一些。我确实发现了那个错误，并从一开始就正确地实现了您的代码。它仍然10次单独加载对象。而且，更新代码中的图像实际上是png。你说得对。即使我这样做了：1.插入一个实例，2。选择此DOM元素（var element=document.querySelector（“#foo object”）；），3。克隆此元素并附加到#foo（foo.appendChild（element.cloneNode（true））；），即使浏览器一次又一次加载数据源…：-（：/）真烦人。哦，好吧。我想我可以为我的具体案例想出一个解决办法，但如果有办法的话，那就太好了。