本文旨在指导开发者如何使用 JavaScript 动态创建 HTML 元素，并应用 CSS 样式，以实现灵活、可维护的网页内容生成。我们将避免使用 document.write()，转而采用 createElement 和 appendChild 等方法，配合 CSS 类名，实现样式与逻辑的分离，提升代码的可读性和可维护性。
避免 document.write()
document.write() 方法在现代 Web 开发中已不推荐使用。它会覆盖整个文档，尤其是在页面加载完成后使用时，可能导致意外的结果和性能问题。
使用 createElement 和 appendChild 动态生成 HTML
更安全、更灵活的方法是使用 document.createElement() 创建 HTML 元素，然后使用 appendChild() 将它们添加到文档中。 这种方法允许你精确控制元素的创建和插入位置，而不会影响页面的其他部分。
样式与逻辑分离：使用 CSS 类名
为了更好地组织和维护样式，建议将 CSS 规则定义在单独的 CSS 文件中，然后使用 JavaScript 为元素添加相应的类名。 这样可以将样式与 JavaScript 逻辑分离，使代码更易于阅读和修改。
立即学习“Java免费学习笔记（深入）”；
示例代码
以下是一个示例，演示如何使用 JavaScript 动态创建一个带有样式的 <h1> 标题：
HTML:
<div class='qr-container'></div>
CSS (style.css):
.title {
color: red;
font-size: 2em;
text-align: center;
}JavaScript:
function openQRCodeWindow(titleText) {
const container = document.querySelector('.qr-container');
const titleElement = document.createElement('h1');
titleElement.textContent = titleText;
titleElement.classList.add('title');
container.appendChild(titleElement);
}
openQRCodeWindow('动态生成的标题');代码解释:
- HTML: 创建一个空的 div 容器，类名为 qr-container，用于存放动态生成的标题。
- CSS: 定义一个名为 title 的 CSS 类，设置标题的颜色、字体大小和文本对齐方式。
-
JavaScript:
- document.querySelector('.qr-container'): 选择 HTML 中类名为 qr-container 的元素。
- document.createElement('h1'): 创建一个 <h1> 元素。
- titleElement.textContent = titleText: 设置标题的文本内容。
- titleElement.classList.add('title'): 为标题元素添加 title 类，应用 CSS 样式。
- container.appendChild(titleElement): 将标题元素添加到 qr-container 容器中。
改进原始代码
可以将原始代码按照上述方法进行改进，将所有 CSS 规则移到外部 CSS 文件中，并使用 createElement 和 appendChild 代替 document.write()。
例如，以下是部分改进后的代码片段：
function openQRCodeWindow(registrationId) {
var qrCodeImage = generatedQRCode._el.firstChild.toDataURL("image/png");
var firstName = document.getElementById("first-name").value;
var lastName = document.getElementById("last-name").value;
var email = document.getElementById("email").value;
var contactNumber = document.getElementById("contact-number").value;
var seatNumber = document.getElementById("seat-number").textContent;
var newWindow = window.open();
const doc = newWindow.document;
// Create style element and append to head (optional, for inline styles)
const style = doc.createElement('style');
style.textContent = `
body { display: flex; flex-direction: column; align-items: center; background-image: url("megapolis background.png"); background-size: cover; }
.container { display: flex; justify-content: space-between; align-items: center; padding: 50px; border: 2px solid #ccc; border-radius: 10px; width: 400px; }
.qr-container { margin-right: 20px; }
.details-container { text-align: right; }
.button-container { margin-top: 20px; text-align: center; }
.button-container button { margin: 0 5px; }
`;
doc.head.appendChild(style);
const h2 = doc.createElement('h2');
h2.textContent = 'QR Code';
doc.body.appendChild(h2);
const containerDiv = doc.createElement('div');
containerDiv.classList.add('container');
containerDiv.id = 'form-container';
doc.body.appendChild(containerDiv);
const qrContainerDiv = doc.createElement('div');
qrContainerDiv.classList.add('qr-container');
containerDiv.appendChild(qrContainerDiv);
const qrImage = doc.createElement('img');
qrImage.src = qrCodeImage;
qrContainerDiv.appendChild(qrImage);
const detailsContainerDiv = doc.createElement('div');
detailsContainerDiv.classList.add('details-container');
containerDiv.appendChild(detailsContainerDiv);
const h3 = doc.createElement('h3');
h3.textContent = 'Details';
detailsContainerDiv.appendChild(h3);
// ... (继续创建其他元素)
doc.close();
}关键改进:
- doc.createElement: 使用 doc.createElement 创建 HTML 元素。
- element.classList.add: 使用 classList.add 添加 CSS 类。
- 避免 document.write: 完全避免使用 document.write。
- 可选内联样式: 使用 <style> 标签和 textContent 添加内联样式（如果需要），但推荐使用外部 CSS 文件。
总结
通过使用 createElement 和 appendChild 等方法，并结合 CSS 类名，可以更有效地使用 JavaScript 动态生成 HTML 内容，并应用样式。 这种方法提高了代码的可读性、可维护性和灵活性，并避免了使用 document.write() 带来的潜在问题。记住将样式与逻辑分离，使用 CSS 类名来管理样式，可以使你的代码更加清晰和易于维护。
