使用JavaScript动态append元素后样式丢失，求解决建议

嘿，我看你遇到的问题是动态添加的元素没显示预期的样式，尤其是那个summernote编辑器对吧？结合你的代码来看，最可能的原因和解决办法我整理好了：

1. 富文本插件未初始化（核心问题） #

summernote这类富文本编辑器需要在页面加载时初始化已存在的元素，但你通过append动态添加的新<textarea>并没有被插件识别和初始化，所以看起来就是个普通文本框，没有编辑器样式。

你只需要在追加HTML之后，手动初始化这个新的summernote实例就行：

$(wrapper).append(`
  <div class='tabbable paper-shadow relative' data-z='0.5' id='tabbable-${x}'>
    <div class='tab-content'>
      <div id='course' class='tab-pane active'>
        <div class='form-group'>
          <textarea name='info${x}' id='info${x}' cols='30' rows='10' class='summernote'></textarea>
        </div>
        <div class='text-center'>
          <button type='button' class='delete'>-</button>
        </div>
      </div>
    </div>
  </div>
`);
// 重点：初始化新添加的summernote编辑器
$(`#info${x}`).summernote({
  // 这里可以配置你的编辑器参数，比如高度、工具栏等
  height: 300,
  toolbar: [
    ['style', ['bold', 'italic', 'underline']],
    ['paragraph', ['ul', 'ol', 'paragraph']]
  ]
});

2. 修复重复ID的问题 #

你动态添加的外层<div>用了固定的id='div'，多次添加后会产生重复ID，这会导致CSS选择器、JS操作出现不可预料的问题，改成动态ID或者直接去掉ID（用类来定位更稳妥）：

<!-- 改成动态ID，避免重复 -->
<div class='tabbable paper-shadow relative' data-z='0.5' id='tabbable-${x}'>

3. 简化删除元素的逻辑 #

你原来的删除操作里用了多层parent()，很容易因为HTML结构变动失效，换成closest()找最近的父容器更可靠：

$(wrapper).on("click", ".delete", function(e) {
  e.preventDefault();
  $(this).closest('.tabbable').remove(); // 直接找最近的.tabbable父元素
  x--;
})

4. 排查CSS样式优先级 #

如果还有其他样式不生效，打开浏览器开发者工具（F12）选中新元素，查看Styles面板：

• 看看对应的CSS规则有没有被划掉（说明被其他优先级更高的规则覆盖了）
• 可以尝试用更具体的选择器，比如.separator .tabbable .summernote，或者临时用!important验证（不推荐长期使用，用来排查问题就行）

先试试第一条初始化插件的办法，这应该能解决你最头疼的编辑器样式问题～

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