Вместо onclick
Здравствуйте! Помогите, пожалуйста. Приведенный ниже код, добавляет текст на страницу по клику на 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 не помогает)? |
Может так?
<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>
|
Да, спасибо, работает.
|
Только почему-то в том случае, когда я хочу поставить текст до 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>
Не подскажите почему? |
<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>
|
Спасибо!
|
| Часовой пояс GMT +3, время: 06:09. |