如何在my_div_class前添加span且不替换整个元素？请教:before用法

嘿，我懂你遇到的问题了！你现在的JS代码直接把.my_div_class元素的全部内容都替换成了那个红色的Hello World span，这显然不是你想要的效果。你提到的:before伪类确实是解决这个问题的绝佳方案，而且完全不用写复杂的JS！

这个方法是最简洁的，它会在目标元素的内容前方插入生成的内容，不会修改原元素的DOM结构，只是在视觉上添加前置内容，非常适合你的需求：

.my_div_class::before {
  /* 必须设置content属性，这里填你要显示的文本 */
  content: "Hello World!";
  /* 设置你需要的样式 */
  color: #ff0000;
  /* 可以加个右边距，让前置内容和原div内容隔开一点，更美观 */
  margin-right: 8px;
}

小贴士：CSS3标准里推荐用双冒号::before，单冒号:before是旧写法（兼容IE8及更早版本），现在主流浏览器都支持双冒号写法啦。

如果你的需求只是添加前置文本样式，这个方法完全够用，不需要碰JavaScript。

如果你需要这个span是真实的DOM元素（比如要给它绑定点击事件、动态修改内容等），那可以用JS创建元素后插入到div的最前面，而不是替换整个innerHTML：

// 获取目标div元素
var targetDiv = document.getElementsByClassName("my_div_class")[0];
// 创建新的span元素
var newSpan = document.createElement('span');
newSpan.style.color = '#ff0000';
newSpan.textContent = 'Hello World!';
// 将span插入到div的第一个子元素之前（如果div没有子元素，就会加到最前面）
targetDiv.insertBefore(newSpan, targetDiv.firstChild);

这样操作后，原div里的内容会完整保留，新的span会出现在它的前面。

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