本文旨在指导开发者如何使用 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 动态创建一个带有样式的
标题：
HTML:
CSS (style.css):
myFocus是一个专注于WEB端焦点图/轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果，体积小，使用简单，兼容ie6+和所有的主流浏览器。myFocus焦点图插件的特点还有： 原生JS编写，独立无依赖 性能卓越，同样效果比jQuery更流畅 简单易用，傻瓜式API和标准HTML结构 效果华丽，媲美Flash焦点图 功能强大，30多种风格切换，支持N种常用设置 体积小巧，仅
.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'): 创建一个
元素。
- 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。
- 可选内联样式: 使用
总结
通过使用 createElement 和 appendChild 等方法，并结合 CSS 类名，可以更有效地使用 JavaScript 动态生成 HTML 内容，并应用样式。 这种方法提高了代码的可读性、可维护性和灵活性，并避免了使用 document.write() 带来的潜在问题。记住将样式与逻辑分离，使用 CSS 类名来管理样式，可以使你的代码更加清晰和易于维护。
