本文旨在指导开发者如何使用 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):
.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。可选内联样式: 使用 标签和 textContent 添加内联样式（如果需要），但推荐使用外部 CSS 文件。
总结
通过使用 createElement 和 appendChild 等方法，并结合 CSS 类名，可以更有效地使用 JavaScript 动态生成 HTML 内容，并应用样式。 这种方法提高了代码的可读性、可维护性和灵活性，并避免了使用 document.write() 带来的潜在问题。记住将样式与逻辑分离，使用 CSS 类名来管理样式，可以使你的代码更加清晰和易于维护。
以上就是使用 JavaScript 动态生成带样式的 HTML 内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530760.html
微信扫一扫 
支付宝扫一扫 
