Bu öğretici, JavaScript kullanarak dinamik olarak HTML kodu yazma yöntemlerini açıklayacaktır.
JavaScript Kullanarak Dinamik Olarak HTML Kodu Nasıl Yazılır?
JavaScript kullanarak HTML kodu yazmak için aşağıdaki yöntemleri kullanın:
Yöntem 1: Document.createElement() Yöntemini Kullanarak HTML Kodunu Dinamik Olarak Yazma
JavaScript'in ' Document.createElement() ” yöntemi ile “ Metin içeriği ” özelliği, JavaScript'te dinamik olarak bir HTML kodu yazmak için kullanılır. createElement() yöntemini kullanarak belirli bir HTML öğesi oluşturabilirsiniz ve metin içeriğini ayarlamak için textContent özelliği kullanılır.
Sözdizimi
JavaScript'te bir HTML öğesi oluşturmak için verilen sözdizimini kullanın:
belge. öğe oluştur ( 'etiket adı' )
Örnek vermek
Burada ilk olarak bir JavaScript dosyasında HTML
etiketini kullanarak bir paragraf oluşturacağız. öğe oluştur() ' yöntem:
sabit metin = belge. öğe oluştur ( 'p' ) ;Bir paragraftaki metni ayarlamak için textContent özelliğini kullanın:
metin. Metin içeriği = 'Linuxhint'e Hoş Geldiniz' ;
Son olarak, “ kullanarak web sayfasındaki metni yazdırın. belge.yaz() ' yöntem:
belge. yazı yazmak ( metin. Metin içeriği ) ;Burada, JavaScript kullanarak web sayfasındaki metni başarıyla yazdığımızı çıktıda görebilirsiniz:
Yöntem 2: innerHTML Özelliğini Kullanarak HTML Kodunu Dinamik Olarak Yazma
HTML kodunu dinamik olarak yazmak için JavaScript'i kullanın ' içHTML ' Emlak. Bir HTML öğesinin içeriğini değiştirmek için en basit yaklaşımdır. Tüm tarayıcıları destekler.
Sözdizimi
innerHTML özelliğini kullanmak için verilen sözdizimini izleyin:
içHTML = 'metin'Örnek vermek
HTML dosyasında, öncelikle, tanımlanan işlevi “ çağıracak bir düğme oluşturun. başlık() ” tıklama etkinliğinde JavaScript'te:
< tıklama düğmesi = 'başlık ()' > Buraya Tıkla buton >Metnin JavaScript'ten gösterileceği
etiketini kullanarak bir paragraf oluşturun ve ona bir kimlik atayın:
< p kimliği = 'yön' > p >Bir işlev tanımlayın ' başlık() ” bir JavaScript dosyasında. Atanan kimliğini kullanarak HTML öğesinin referansını “ yardımıyla alın. getElementById() ” yöntemi ve bir “ uygulayın içHTML ” üzerindeki özellik:
işlev başlığı ( ) {belge. getElementById ( 'yön' ) . içHTML = '
Linuxhint'e Hoş Geldiniz
' ;}
Çıktı
HTML kodunu JavaScript kullanarak dinamik olarak yazmakla ilgili tüm temel bilgileri derledik.
Çözüm
HTML kodunu JavaScript'te dinamik olarak yazmak için “ Document.createElement() ” yöntemi ile “ Metin içeriği ” mülk veya “ içHTML ' Emlak. Birinci yöntemde herhangi bir HTML koduna ihtiyacınız yokken innerHTML özelliğinde HTML elementine erişmeniz ve üzerinde bir işlem yapmanız gerekiyor. Bu eğitimde, JavaScript'i dinamik olarak kullanarak HTML kodu yazma yöntemlerini açıkladık.