使用 JavaScript 动态生成带样式的 HTML 内容-js教程-PHP中文网

使用 JavaScript 动态生成带样式的 HTML 内容

DDD

发布： 2025-10-19 10:12:11

原创

817人浏览过

使用 javascript 动态生成带样式的 html 内容

本文旨在指导开发者如何使用 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 类名来管理样式，可以使你的代码更加清晰和易于维护。

以上就是使用 JavaScript 动态生成带样式的 HTML 内容的详细内容，更多请关注php中文网其它相关文章！