JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

Kasım 17, 2020

Bu işlemi yapan kodlar aşağıdaki gibidir

<script>

window.onload=function(){

/*eklenecek içerik*/

var a = "<style>.eklenenKutu{display:table;max-width:350px;height:auto;;background-color:#00dd00;padding:2%;}.ekleneniIcerik{display:table-cell;text-align:center;width:100%;height:auto;vertical-align:middle;color:#fff;font-size:18px;font-weight:bold;font-family:Proxima}@media screen and (max-width:900px){.eklenenKutu{max-width:90%;width:55%;margin:5px auto;}.ekleneniIcerik{font-size:.18px;}}</style><div class=\"eklenenKutu\"><div class=\"ekleneniIcerik\">Bu eleman Javascript ile başka bir elemanın içeriğinin başlangıcına eklenmiştir.<\/div><\/div>";

/*Ekleneceği eleman*/

var b=document.querySelectorAll(".disKutu")[0];

/*eklemek istediğimiz içeriği ilgili elemanın içeriğinin başına ekleyen kod*/

b.insertAdjacentHTML('afterbegin', a);

}

</script>

<div class="disKutu">

<div style="display:block;width:450px;height:55px;">Bu kutudaki içerikten önce eklenecek</div>

</div>

Kodun canlı çalışan örneğini görmek için aşağıdaki butona basın.

Bu kutudaki içerikten önce eklenecek

Saygılarımla...
Turgut ARSLAN

Yorumlar