JavaScript, HTML (Köprü Metni İşaretleme Dili) ile aynı öğelerin oluşturulmasına ve değiştirilmesine izin veren çok yönlü bir programlama dilidir. Bu işlevi gerçekleştirmek için 'append()' ve 'appendChild()' yöntemlerini izler. Adından da anlaşılacağı gibi, her iki yöntem de String veya Node nesneleri gibi HTML öğelerini ekler. Ancak, işlevlerine ve diğer faktörlere bağlı olarak birbirlerinden farklılık gösterirler.
Bu kılavuz, jQuery ' arasındaki temel farkların altını çizmektedir. eklemek ()” ve JavaScript “ eklemeChild ()” yöntemleri.
jQuery arasındaki farklara geçmeden önce “ eklemek ()” ve JavaScript “ eklemeChild ()” yöntemleri, öncelikle bu yöntemlerin temellerine bir göz atın.
jQuery append() Yöntemi nedir?
jQuery' eklemek ()” yöntemi, istenen “Node” ve “String” nesnelerini ana öğenin son çocuğu olarak sona ekler.
Sözdizimi
$ ( seçici ) . eklemek ( içerik , işlev ( dizin , html ) )Yukarıdaki sözdiziminde:
- içerik : HTML öğelerini, DOM öğelerini veya jQuery nesnelerini ifade eder.
- işlev : “index (eleman konumu)” ve “html (seçilen elemanların html'si)” parametrelerine sahip kullanıcı tanımlı JavaScript işlevini belirten ek bir parametredir.
JavaScript appendChild() Yöntemi nedir?
'appendChild()' yöntemi, 'Node' nesnesini yalnızca üst öğenin son çocuğundan sonra ekler. Önce “createElement()” yöntemini kullanarak istenilen Node nesnesini oluşturur ve sonra onu ekler.
Sözdizimi
eleman. eklemeChild ( düğüm )Bu sözdizimi yalnızca bir parametre gerektirir, yani, ' düğüm ”.
Adından da anlaşılacağı gibi, yukarıda tartışılan yöntemler birbirinden farklıdır. Bu bölüm, farklı oldukları bazı faktörleri ortaya koymaktadır. Onlara bir göz atalım.
jQuery append() ve JavaScript appendChild() Yöntemi Arasındaki Farklar
| şartlar | jQuery ekleme() | JavaScript appendChild() |
|---|---|---|
| Kullanım | Yeni ' ekleyerek ana öğeyi eklemek için kullanılabilir. düğüm ' Ve ' Sicim ” aynı anda nesneler. | Yalnızca ana öğeye yeni ' ile eklemek için kullanılabilir. düğüm ' kullanılarak oluşturuldu öğe oluştur ()' yöntem. |
| Çoklu Düğüm Nesneleri | “ eklemek ()” yöntemi, ilişkili üst öğeye aynı anda aşağıdaki biçimde birden çok Düğüm nesnesi ekleyebilir. Biçim : “div.append(birinci çocuk, ikinci çocuk, 'Linuxhint');” |
“ eklemeChild ()” yöntemi, birden çok Düğüm nesnesiyle iyi çalışır, ancak her seferinde yalnızca ilk alt öğeyi ve ardından bir sonrakini ekler. Biçim : “div.appendChild(birinci çocuk, ikinci çocuk, 'Linuxhint');” |
| Geri dönüş değeri | “ eklemek ()” yöntemi, “tanımsız” döndürülen bir değer gösterdiğinden, yani eklenen Düğüm nesnesini döndürmez. Biçim : console.log(appendChildValue) // tanımsız |
Öte yandan, “ eklemeChild ()” yöntemi, eklenen Düğüm nesnesini içeren bir değer döndürür. Biçim : console.log(appendChildValue) //
|
Şimdi listelenen temel farklılıkların pratik uygulamasına geçin.
Fark 1: jQuery append() ve JavaScript appendChild() Yöntemlerini Uygulamak
Birinci farka göre “ eklemek ()” yöntemi hem Düğümü hem de Dizeyi eklerken, “appendChild()” yöntemi yalnızca Düğüm nesnelerini ekler.
HTML Kodu
İlk olarak, belirtilen HTML koduna bir göz atın:
< vücut >< h2 > jQuery 'append()' Yöntemi < / h2 > //ek için() < h2 > jQuery 'appendChild()' Yöntemi < / h2 > //pendChild() için
< düğme İD = 'btn1' tıklamada = 'benimFunc1()' > DOM Dizesi Ekle < / düğme >
< düğme İD = 'btn2' tıklamada = 'benimFunc2()' > DOM Düğümü Ekle < / düğme >
< P İD = 'için' > Bu bir paragraf. < / P >
< ol İD = 'liste' >
< O > JavaScript Eğitimi 1 < / O >
< O > JavaScript Eğitimi 2 < / O >
< O > JavaScript Eğitimi 3 < / O >
< / ol >
< / vücut >
Yukarıdaki kod satırlarında:
- “
” etiketi, seviye 2'nin alt başlığını tanımlar.
- '
- '
' etiketi, eklenen dize değerini göstermek için atanmış 'para' kimliğine sahip boş bir paragraf oluşturur.
- “
- ” etiketi, “list” kimliğine sahip sıralı bir liste ve “
- ” etiketleri yardımıyla listelenen öğeleri ekler.
Not : Hem “append()” hem de “appendChild()” metotlarının birinci farkında yukarıda yazılan HTML kodunu takip edin.
“append()” Yöntemi jQuery Kodu
İlk olarak, “append()” yöntemi jQuery koduna genel bakış:
< KAFA >< komut dosyası kaynağı = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > senaryo >
< senaryo >
$ ( belge ) . hazır ( işlev ( ) {
$ ( '#btn1' ) . tıklamak ( işlev ( ) {
$ ( 'P' ) . eklemek ( ' Eklenmiş Dize .' ) ;
} ) ;
$ ( '#btn2' ) . tıklamak ( işlev ( ) {
$ ( 'ol' ) . eklemek ( '
} ) ;
} ) ;
senaryo >
KAFA >
Yukarıdaki kod satırlarında:
- İlk olarak, jQuery'yi belirtin ' CDN 'resmi web sitesinden yol' https://jquery.com/ '' yardımıyla kaynak ' bağlanmak.
- Ardından, ilk önce “ kullanan küçük bir komut dosyası bölümü ekleyin. hazır ()” yöntemini çağırmak için belirtilen “ işlev ()” HTML belgesi yüklendiğinde.
- Bundan sonra “ tıklamak ()” yöntemi, kimliği “ olan düğmeyle bağlantılı işlevi yürütür. btn1 ” butonuna tıklayın.
- Fonksiyon tanımında, “ eklemek ()” yöntemi, hedeflenen paragraf elemanını belirtilen dizge ile eklemek için kullanılır.
- Aynı işlem eklenen “ Sıralı Liste ” yani, verilen öğeye eklemek için Node nesnesi.
Çıktı
Burada hem “String” hem de “Node” nesnelerinin “append()” metodu yardımıyla eklendiği doğrulanmıştır.
“appendChild()” Yöntem JavaScript Kodu
Şimdi pratik olarak JavaScript 'appendChild()' yöntemine bakın:
< senaryo >işlev benimFunc1 ( ) {
için. eklemeChild ( '
Eklenen Dize
' ) //DOM Dizesi Ekle} işlev benimFunc2 ( ) {
sabit eleman = belge. öğe oluştur ( 'O' ) ;
sabit düğüm = belge. Metin Düğümü oluştur ( 'Ek Öğe' ) ;
eleman. eklemeChild ( düğüm ) ; //DOM Düğümünü Ekle
sabit eleman = belge. getElementById ( 'liste' ) ;
eleman. eklemeChild ( eleman ) ;
}
senaryo >
Yukarıdaki kod parçacığında:
- Bir işlev adı tanımlayın ' benimFunc1 ()”, eklenen paragrafı verilen dizeyle eklemek için “appendChild()” yöntemini kullanır.
- Daha sonra, “ benimFunc2 ()” işlevinde, “createElement()” yöntemi yeni bir liste öğesi oluşturur ve ardından “createTextNode()” yöntemini kullanarak buna bir miktar metin ekler.
- Bundan sonra, 'appendChild()' yöntemini kullanarak oluşturulan liste düğümünü metniyle birlikte ekleyin.
- Son olarak, yeni oluşturulan list Node'u, “appendChild()” yöntemi yardımıyla, id'si “list” olan erişilen sıralı listeye ekleyin.
Çıktı
Görüldüğü gibi butona tıklandığında “String” değil sadece “Node” nesnesi ekleniyor.
Hata
Web konsolunu açmak ve sorunu incelemek için “F12”ye basın:
Görüldüğü gibi konsol, String nesnesini “appendChild()” metodunu kullanarak eklerken bir hata gösteriyor. Dolayısıyla, “appendChild()” yönteminin bir String nesnesi eklemediği onaylanmıştır.
Fark 2: jQuery append() ve JavaScript appendChild() Yöntemlerini Birden Çok Düğüm Nesnesine Uygulamak
“append()” ve “appendChild()” yöntemleri arasındaki ikinci fark, bu yöntemlerin birden fazla düğüm nesnesi üzerinde gerçekleştirilmesiyle analiz edilebilir. Pratik uygulamasını görmek için verilen kodları izleyin.
HTML Kodu
HTML kodunu inceleyelim:
< div İD = 'ana div' >< div stil = 'display:flex; haklı içerik: merkez; hizalama öğeleri: merkez; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan: turuncu; kenar boşluğu: 10 piksel; metin hizalama: merkez;' > Bir < / div >
< div stil = 'display:flex; haklı içerik: merkez; hizalama öğeleri: merkez; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan: turuncu; kenar boşluğu: 10 piksel; metin hizalama: merkez;' > İki < / div >
< div stil = 'display:flex; haklı içerik: merkez; hizalama öğeleri: merkez; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan: turuncu; kenar boşluğu: 10 piksel; metin hizalama: merkez;' > Üç < / div >
< / div >
Burada, yukarıdaki kod satırları, kimliği “main-div” olan bir ana “
Not : Hem “append()” hem de “appendChild()” metotlarının ikinci farkı yukarıda yazılan HTML kodunu takip eder.
append() Yöntem
Şimdi, aşağıdaki komut dosyasıyla devam edin:
< senaryo >sabit anadiv = belge. getElementById ( 'ana div' ) ;
sabit div4 = belge. öğe oluştur ( 'div' ) ;
div4. içHTML = 'Dört' ;
div4. stil . arka plan rengi = 'pembe' ;
div4. sınıfListesi . eklemek ( 'div' ) ; sabit div5 = belge. öğe oluştur ( 'div' ) ;
div5. içHTML = 'Beş' ;
div5. stil . arka plan rengi = 'pembe' ;
div5. sınıfListesi . eklemek ( 'div' ) ;
anadiv. eklemek ( div4 , div5 ) ;
senaryo >
Yukarıdaki kod parçacığında:
- “maindiv” değişkeni, eklenen “div”e “main-div” id'sini “getElementById()” yöntemi yardımıyla erişir.
- Ardından, 'createElement()' yöntemi yeni bir 'div' Düğüm nesnesi oluşturur, 'innerHTML' özelliğini kullanarak belirtilen metni ekler ve 'style.backgroundcolor' özelliği aracılığıyla arka plan rengini uygular.
- Bundan sonra, 'add()' yöntemi, 'classList' özelliğini kullanarak belirtilen sınıf CSS özelliklerini kendisine ekler.
- Bir sonraki yeni oluşturulan “” elemanı için de aynı prosedür izlenir.
- Son olarak, yeni oluşturulan her iki Node nesnesi, “append()” yönteminin yardımıyla aynı anda eklenir.
Çıktı
Burada, yeni oluşturulan birden çok Düğüm nesnesi, buna göre aynı üst öğeye eklenir.
“appendChild()” Yöntemi
Ardından, “appendChild()” yöntemiyle devam edin:
< senaryo >
anadiv. eklemeChild ( div4 ) ;
anadiv. eklemeChild ( div5 ) ;
senaryo >Görüldüğü gibi “appendChild()” methodu birden fazla Node nesnesini aynı parent elemente teker teker ekler.
Çıktı
Çıktı, 'append()' yöntemiyle aynıdır, ancak Düğüm nesnelerini belirlemede farklıdır.
Fark 3: Uygulanan jQuery append() ve JavaScript appendChild() Yöntemlerinin Dönüş Değeri
Son fark, “append()” ve “appendChild()” yöntemlerinin “döndürülen değeri”dir. Uygulamalı olarak görelim.
Not : HTML kodu, Fark 2 (Birden Çok Düğüm Nesnesi) ile aynıdır.
“append()” Yöntemi
Verilen kod satırlarına bakın:
< senaryo >
konsol. kayıt ( anadiv. eklemek ( div4 ) ) ;
senaryo >Burada “console.log()” metodu, belirtilen Node nesnesini eklerken “append()” metodunun döndürdüğü değeri kontrol etmek için uygulanır.
Çıktı
Web konsolunu açmak için “F12”ye basın:
Görüldüğü gibi “append()” metodunun döndürdüğü değer “ Tanımsız ”.
appendChild() Yöntem
Şimdi, 'appendChild()' yöntemini kullanan aşağıdaki kodu göz önünde bulundurun:
< senaryo >
konsol. kayıt ( anadiv. eklemeChild ( div4 ) ) ;
senaryo >“append()” yöntemiyle aynı olan “console.log()” yöntemiyle “appendChild()” yöntemini belirtin.
Çıktı
Burada çıktı, bunun yerine stil özelliklerini içeren eklenen öğe HTML'sini döndürür.
Çözüm
jQuery' eklemek ()” ve JavaScript “ eklemeChild ()” yöntemleri, “ sözdizimi”, “kullanım” ve “çoklu Düğüm nesneleri ”. Üstelik onların “ döndürülen değerler ” de birbirinden farklıdır. Her iki yöntem de kullanışlıdır ve kullanımları kullanıcının tercihlerine bağlıdır. Bu kılavuz, jQuery arasındaki farkı listeledi ' eklemek ()” ve JavaScript “ eklemeChild ()” yöntemi pratik olarak.