如何将按钮的内容分成另一个HTML文件？

Question

我正在处理一个HTML文件，该文件在Electron App中充当其自己的页面。在此文件中，我有一个按钮，单击后会显示一个弹出表单。这是按钮和弹出内容的相关代码：

<button class="open-button" id="openConfig">Change Configuration</button>

	<div class="modal-content" id="networkConfig">
		<div class="modal-header">
			<h2>Configuration Settings</h2>
		</div>

		<div class="modal-body">
			<p>To get started, enter some initial information about the network you want to configure.</p>
			<p>Leave the number of nodes as zero if you would like to start from scratch.</p>
			<br />

			<p>Number of nodes:</p>
			<input type="number" id="nodeNumber" value="0" min="0" max="30">
			<br /><br />
			<p>Preference:</p>
			<div>
				<input type="radio" id="prefsecure" name="option" value="Secure" checked>
				<label for="prefsecure">Secure (Recommended)</label>
			</div>
			<div>
				<input type="radio" id="prefefficient" name="option" value="Efficient">
				<label for="prefefficient">Efficient</label>
			</div>
			<br />

		</div>
		<div class="modal-footer">
			<button type="submit" class="btn">Start Configuration</button>
			<button type="button" class="btn cancel" id="closeConfig">Cancel</button>
			<br /><br />
		</div>
	</div>

此外，以下是相关的javascript函数，这些函数可让我打开/关闭此弹出窗口：

function openForm() {
	document.getElementById("networkConfig").style.display = "block";
}
function closeForm() {
	document.getElementById("networkConfig").style.display = "none";
}

document.addEventListener('DOMContentLoaded', function () {
	document.getElementById('openConfig')
		.addEventListener('click', openForm);
});
document.addEventListener('DOMContentLoaded', function () {
	document.getElementById('closeConfig')
		.addEventListener('click', closeForm);
});

我想做的就是将单击按钮时弹出的内容（按钮的id =“ openConfig”）放入一个单独的HTML文件中（我想要的内容在另一个文件中的ID为“ networkConfig”）。这是为了帮助划分我的代码。如何使按钮引用该其他文件？有人有线索吗？我将不胜感激任何帮助！

[此外，如果在发布此消息时出错，我深表歉意。这是我关于stackoverflow的第一篇文章，而最近几天我一直找不到我想要的东西。谢谢您的阅读！

Answer 1

如果我做对了，您执行的方法是将要重用的内容发布到某个地方，初始化一个空变量，添加减价，从而能够在其他地方提示它，或者保存一个包含以下内容的临时文件：标记（不安全）。