将HTML页面的一部分存储在变量中

Question

我有一些这样的HTML：

<div class="col-xs-3 col-sm-3 col-md-3 no-padding--xs" style="text-align:right; padding-left:30rem">
<div class="no-padding--xs box--lang">
<a href="Intranet_sk.html"><img style="width:30px" src="Intranet_flags/flag-SVK-round.png"></a>
<a href="Intranet_en.html"><img style="width:30px"src="Intranet_flags/flag-UK-round.png"></a>
</div> 
</div>
</div>

，我想将其保留在页面布局的上部，但在（渲染的）页面的下部使用它，有点像将代码存储在变量中，并在变量的特定部分中使用该变量页面。

整个Intranet将由许多模块组成，但是对于每个“子页面”来说，这都是唯一的，因此我想将可编辑的代码保留在页面布局的上部，并使用较低的静态模块调用/发布它。

为什么？ href部分中的“ Intranet_”对于每个子页面都是唯一的。

或者，我可以在子页面元名称上附加“ _sk”还是“ _en”并创建类似的链接吗？

Answer 1

您可以通过执行element.innerHTML += stringThatContainsHTML

将html代码存储在普通字符串中并将其添加到任何html元素中。

您还可以使用var htmlString = element.innerHTML

相同的方式检索HTML

Answer 2

1. 创建元素（document.createElement）
2. 将必要元素的克隆附加到该（[createdElement].appendChild([someElement].cloneNode([true]))）
3. 在创建的元素（[createdElement].querySelector[All](...)）中重复使用所需的内容

此处必不可少：创建的元素仅存在于内存中（未在DOM中插入/添加）。