如何将按钮的内容分离到另一个 HTML 文件中？答案

【问题标题】：How to separate the content of a button into another HTML file?如何将按钮的内容分离到另一个 HTML 文件中？
【发布时间】：2020-04-06 18:28:26
【问题描述】：

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

<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 在单独的文件中是“网络配置”）。这是为了帮助划分我的代码。我怎样才能让按钮引用这个其他文件？有人有线索吗？我将非常感谢任何帮助！

另外，如果我在发布此内容时犯了任何错误，我深表歉意。这是我在 stackoverflow 上的第一篇文章，过去几天我一直没能找到我要找的东西。感谢您的阅读！

【问题讨论】：

标签： javascript html button

【解决方案1】：

如果我做对了，那么你这样做的方法是发布你想要在某处重用的内容，初始化一个空变量，添加降价，从而能够在其他地方提示它，或者保存一个临时文件包含标记（不安全）。

【讨论】：