-
本文深入解析Select2在动态增删DOM元素时随机失效的根本原因（ID冲突与实例残留），提供基于<template>和索引重写机制的标准化解决方案，并附可直接运行的完整示例代码。
-
箭头函数是ES6引入的简洁函数语法，无this/arguments/super/new.target，不能作构造函数或生成器，适合回调场景。
-
应正确应用CSS的margin、padding、box-sizing、gap及负margin属性：margin控制元素外部间距，padding调节内部留白，box-sizing统一尺寸计算，gap简化flex布局间隙，负margin用于微调位置。
-
在CSSGrid布局中，column-gap和row-gap用于控制网格元素之间的间距，但它们作用的方向不同。理解两者的区别有助于更精准地控制布局外观。column-gap：控制列之间的水平间距column-gap设置的是网格中相邻列之间的水平空白距离。它不会影响第一列左侧或最后一列右侧的外边距，只作用于列与列的中间区域。例如，一个三列的网格布局，使用column-gap:20px;，会在第1列和第2列之间、第2列和第3列之间各添加20px的空白。常见用法：grid
-
call和apply方法都用于改变函数的this指向，但在参数传递上不同：1.call方法接受一个this值和若干个参数；2.apply方法接受一个this值和一个参数数组。选择使用哪一个取决于具体需求和代码风格。
-
HTML文本分行显示有四种方法：一、用<br>标签强制换行；二、用<p><div>等块级元素包裹各行；三、用white-space:pre-line等CSS属性控制空白符；四、用Flexbox布局实现可控分行。
-
通过JavaScript操作HTML元素实现动态交互，核心方法包括：1.使用document.getElementById()获取元素并修改内容；2.采用addEventListener绑定事件以分离结构与行为；3.动态创建并插入新元素。确保DOM加载完成后再执行脚本是关键细节。
