使用document.write()时Materialize CSS样式不生效，如何解决？

嘿，这个问题我太熟了！为啥document.write出来的元素没Materialize样式？核心原因是Materialize的组件需要在DOM元素加载完成后手动（或自动）初始化，而你用document.write动态生成的元素，要么是在页面初始渲染后才出现，Materialize没检测到；要么是你在页面加载完成后调用document.write直接覆盖了整个页面，连原来的Materialize初始化逻辑都冲没了。

下面给你两种解决方案，从推荐到备选：

一、优先替换document.write，用标准DOM操作添加元素 #

document.write在现代前端开发里已经不推荐使用了，它容易破坏DOM结构，还会在页面加载完成后调用时直接清空页面。推荐用jQuery的append()、html()或者原生JS的innerHTML、createElement来添加动态内容，这样新元素会被添加到指定容器里，之后再针对性初始化组件。

举个实际例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>STL Info</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
  <!-- 先准备一个容器放动态内容 -->
  <div id="dynamic-content"></div>

  <script>
    // 用jQuery append添加动态元素（比如一个Materialize按钮+下拉选择框）
    $('#dynamic-content').append(`
      <button class="btn waves-effect waves-light">动态生成的按钮</button>
      <select class="browser-default">
        <option value="" disabled selected>选择一个选项</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
      </select>
    `);

    // 手动初始化Materialize组件
    $('.btn').wavesEffect(); // 初始化按钮的波纹效果
    $('select').formSelect(); // 初始化下拉选择框
  </script>
</body>
</html>

二、如果一定要用document.write，记得手动初始化组件 #

如果你因为某些原因必须保留document.write，那要注意两个关键点：

1. 不要在页面加载完成后调用document.write（比如点击事件里），否则会清空整个页面；
2. 在document.write生成元素后，立刻调用对应组件的Materialize初始化方法。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>STL Info</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
  <script>
    // 在页面加载过程中用document.write生成元素
    document.write('<div class="card"><div class="card-content"><span class="card-title">动态卡片</span><p>这是document.write生成的卡片</p></div></div>');
    document.write('<a class="dropdown-trigger" href="#" data-target="dropdown1">下拉菜单</a>');
    document.write('<ul id="dropdown1" class="dropdown-content"><li><a href="#!">选项1</a></li><li><a href="#!">选项2</a></li></ul>');

    // 手动初始化组件
    $('.dropdown-trigger').dropdown(); // 初始化下拉菜单
    // 像卡片这种纯CSS样式的组件，只要类名对了就会自动生效，不需要JS初始化
  </script>
</body>
</html>

关键提醒 #

• 纯CSS类（比如card、red-text、container这些）只要你给动态元素加上正确的类名，样式就会自动生效，不需要额外操作；
• 带交互的组件（比如下拉菜单、模态框、选择框、波纹按钮）必须调用对应的Materialize初始化方法才能正常工作，不同组件的初始化方法可以查Materialize的官方文档（比如formSelect()对应选择框，dropdown()对应下拉菜单）。

内容的提问来源于stack exchange，提问作者user9510658