將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

您可以將HTML代碼存儲在普通字符串中，然后通過執行element.innerHTML += stringThatContainsHTML將其添加到任何html元素中

您也可以用var htmlString = element.innerHTML的相同方式檢索HTML var htmlString = element.innerHTML

Answer 2

1. 創建一個元素（ document.createElement ）
2. 將必要元素的克隆附加到該元素上（ [createdElement].appendChild([someElement].cloneNode([true])) ）
3. 在創建的元素內重用您需要的任何內容（ [createdElement].querySelector[All](...) ）

在這里很重要：創建的元素僅存在於內存中（沒有在DOM中插入/添加）。