Javascript ile veriyi bir alt satıra nasıl yazdırabiliriz?

Javascript ile veriyi bir alt satıra nasıl yazdırabiliriz? HTML dilinde bir alt satıra geçmek için
ya da
şeklinde yazılan etiketi kullanırız. Javascirpt ile bir yere sonuç yazdırırken de yazdırdacağımız çıktı içine bu tag'i ekleyerek çıktı verilerimizi bir alt satıra yazdırabiliriz. Örnek senaryomuzda  biri mavi diğeri yeşil iki adet div bulunmakta. Mavi kutudaki "İçerik Metni" yazısını yeşil kutudaki "İşlemin Sonucu" metninin altına yazdırmak istiyoruz. Bunun için yazdir isminde bir fonksiyon oluşturuyoruz. Bu fonksiyon butona basıldığında çalışacak ve mavi kutudaki metni alıp yeşil kutudakinin altına ekleyecek. Önce veri isminde bir değişken tanımlayalım ve içine mavi kutudaki içeriği aktaralım.

 var veri=document.getElementById("maviKutu").innerHTML; Sonra yeşil kutuyu yakalayalım ve veri değişkenindeki değeleri bukutunun içine yazdıralım. document.getElementById("yesilKutu").innerHTML+=""+veri;

 Gördüğünüz gibi sadece ""+veri; atamasını yaparak mavi kutunun içeriğini yeşil kutuda bir alt satıra yazdırmış olduk. Burada atama yaparken = yerine += kullandığımızı fark ettiniz değil mi? Bunu kullanmamızın nedeni Yeşil kutudaki içeriğin kaybolmasını önlemekti. Eğer sadece = operatörünü kullansaydık veri yeşil kutunun içeriği mavi kutudan alınan değerlerle değişecekti. Ama biz ekleme yapmak istiyoruz. Bu sebepten += operatörünü kullanarak var olan içeriğe veri değişkeninin değerini de eklemiş olduk. Programın kodları aşağıdaki gibidir.

<div id="maviKutu" style="display:block;width:250px;height:85px;border:solid 1px #86c2a8;padding:2px;background:#a1ffdb;margin-bottom:2px;">İçerik Metni</div>
<div id="yesilKutu" style="display:block;width:250px;height:85px;border:solid 1px #04633b;padding:2px;background:#c2ffa1;text-align:center;">İşlemin Sonucu</div>
<button type="button" onclick="yazdir();">
Yazdır</button>

<script>
function yazdir(){
var veri=document.getElementById("maviKutu").innerHTML;

document.getElementById("yesilKutu").innerHTML+="<br>"+veri;
}
</script>

 Şimdi de Javascript kodlarımızı çalıştıralım.

İçerik Metni

İşlemin Sonucu