Javascript

Html Etiketlerine Kodlarla Resim Ekleme

Web sayfaları hangi dilde kodlanırsa kodlansın bunların hepsi html etiketlerine dönüştürülür. Örneğin Div etiketi web sayfasında kutu oluşturmak için kullanılır. Bu dersimizde div etiketine kodlar yardımıyla resim nasıl eklenir. Onu öğrenmeye çalışacağız. Aşağıda yer alan resim linkini kullanalım.

var url = 'https://www.maarificedid.com/resimler/ilkbahar.jpg';

Javascript Kodlarıyla

var image = new Image();
image.src = url;
document.getElementById('container').appendChild(image);

jQuery Kodlarıyla

$(document).ready(function() {
    var image = new Image();
    image.src = url;
    $('#container').append(image);
});
 
$(document).ready(function() {
    $(`<img src='${url}'>`).appendTo('#container');

});

 
$(document).ready(function() {
    $('#container').html(`<img src='${url}'>`);
});
 
$('#theDiv').prepend('<img src='${url}'/>')
İlgili Makaleler
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan Programı Javascript Script Dilinde Yapınız
Birinci Dereceden Bir Bilinmeyenli Bir Denkleme Ait Çözüm Kümesine Göre Grafik Oluşturan Programı Javascript Script Dilinde Yapınız
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Bölme İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Faktöriyel Hesabı Yapan Javascript Uygulaması
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Çarpma İşaretini Kullanmadan İki Sayıyı Çarpan Programı Javascript Script Dilinde Yapınız
Yayınlanan Web Service Hizmetini Terminal Tabanlı Web Sayfasında Kullanma
JavaScript Sınıf Bildirimleri (Class Declarations) ile Sınıf Tanımlama
RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama
ListBox Yardımıyla Listelenen Dosya Uzantılarının Hangi Medya Dosyası Olduğunu Bulan Web Sayfasını Javascript Kodlarıyla Düzenleme
Resmin Üzerinde Click, MouseOver, MouseOut Olaylarını Uygulayan Programı Javascript Script Dilinde Yapınız
Mevcut Tarihi Takvim Yaprağı Şeklinde Gösteren Programı Javascript Script Dilinde Yapınız
Div Katmanı İçinde Gösterilen Metni Silen Programı Javascript Script Dilinde Yapınız
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama3
Web Sayfasına JavaScript Kodlarını Tanıtma

Yorum Ekle
   
Kötü İyi