Question

试图找出我应该如何在my_div_class之前放置一个跨度而不是替换所有它。现在它取代了div，但我不想这样做。我认为它类似于：之前但不知道如何使用它。

<script>
 {
  var x = document.getElementsByClassName("my_div_class");
  x[0].innerHTML = "<span style='color:#ff0000;'>Hello World!<span>";
 }
</script>

Answer 1

使用insertAdjacentHTML：

var x = document.getElementsByClassName("my_div_class");
var html = '<span style="color:#ff0000;">Hello World!<span>';
x[0].insertAdjacentHTML('beforebegin', html);

<div class="my_div_class">Hallo</div>

Answer 2

如果您想在span的当前内容之前添加div，请使用：

x[0].innerHTML = "<span style='color:#ff0000;'>Hello World!</span> " + x[0].innerHTML;

请注意，您的代码中有多处错误：

您没有正确关闭span代码。
您不需要那些大括号。
您可能需要在span的末尾添加空格，以将其与div的当前内容分开。

试试这个：

var x = document.getElementsByClassName("my_div_class");
x[0].innerHTML = "<span style='color:#ff0000;'>Hello World!</span> " + x[0].innerHTML;

<div class="my_div_class">first div</div>
<div class="my_div_class">another div</div>
<div class="my_div_class">yet another div</div>
<div class="my_div_class">second div</div>
<div class="my_div_class">third div</div>

以前，不要更换

2 个答案: