Вместо onclick

[Sonya]

Здравствуйте! Помогите, пожалуйста. Приведенный ниже код, добавляет текст на страницу по клику на span, после элемента span.

<div class="raz">
<span>Здесь что-то</span>
</div>
<script>
document.querySelector('.raz span').onclick = function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  this.parentNode.insertBefore(theDiv, this.nextSibling);
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
}
</script>

Можно ли, чтобы он это делал без клика (onload не помогает)?

[Nexus]

Может так?

<div class="raz">
<span>Здесь что-то</span>
</div>
<script>
document.addEventListener('DOMContentLoaded',function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  document.querySelector('.raz span').parentNode.insertBefore(theDiv, this.nextSibling);
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
},false);
</script>

[Sonya]

Да, спасибо, работает.

[Sonya]

Только почему-то в том случае, когда я хочу поставить текст до spain заменяя this.nextSibling на this.previousSibling, не получается. Хотя по клику ставит:

<div class="raz">
<span>Здесь что-то</span>
</div>
<script>
document.querySelector('.raz span').onclick = function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  this.parentNode.insertBefore(theDiv, this.previousSibling);
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
}
</script>

Не подскажите почему?

[Dilettante_Pro]

<div class="raz">
<span>Здесь что-то</span>
</div>
<script>
document.addEventListener('DOMContentLoaded',function() {
  var theDiv = document.createElement('div');
  theDiv.innerHTML = 'HTML-содержимое';
  document.querySelector('.raz').insertBefore(theDiv,this.querySelector('span'));
  getComputedStyle(theDiv).opacity;
  theDiv.style.opacity = '1';
},false);
</script>

[Sonya]

Спасибо!