Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

innerHTML ve outerHTML DOM özellikleri, bir web sayfasında içerik okumanıza ve yazmanıza olanak tanır. İşaretlemeyi getirmek veya üzerinde değişiklik yapmak için bunları kullanabilirsiniz ve ikisi birçok yönden benzerdir. Ancak önemli bir fark var.

DOM ile çalışırken innerHTML ve outerHTML'yi oldukça farklı kullanacaksınız. Bu iki özelliği nasıl kullanacağınızı pratik örneklerle öğrenin.

İç HTML Nedir?

innerHTML özelliği, DOM ve JavaScript aracılığıyla erişebilirsiniz. Bir öğenin içeriğini almak veya ayarlamak için kullanabilirsiniz. Bu içerik, öğenin kendi etiketini hariç tutar ve yalnızca öğenin alt öğelerini bir dize biçiminde temsil eden işaretlemeyi içerir.

Bu kod örneğini göz önünde bulundurun:

<html>
<vücut>
<PİD="myP">Ben bir paragrafım.P>


<senaryo>
belge.getElementById("myP").içHTML = "Selam Dünya";
senaryo>
vücut>


html>
instagram viewer

Tarayıcınızda, aşağıdaki gibi değiştirilen metinle birlikte standart bir paragraf göreceksiniz:

innerHTML özelliği, içeriğin içeriğini seçer ve değiştirir.bu örnekteki öğe.

Dış HTML Nedir?

outerHTML özelliği, birçok yönden innerHTML'ye benzer. Seçili bir öğenin içeriğini almak veya ayarlamak için kullanabilirsiniz. Ancak, öğenin kendisini temsil eden işaretlemeyi de ayarlar. Bu, açılış etiketini, herhangi bir özelliği ve - ilgili olduğunda - kapanış etiketini içerir.

outerHTML'nin nasıl farklı olduğunu görmek için önceki örneği tekrar ziyaret edin:

<html>
<vücut>
<PİD="myP">Ben bir paragrafım.P>


<senaryo>
belge.getElementById("myP").dışHTML = "
Bu H1 bir paragrafın yerini aldı.
"
senaryo>
vücut>
html>

Tarayıcınızda şöyle bir şey görmelisiniz:

Bu örnekte, outerHTML özelliği, P eleman içine bir h1 eleman.

Farkı Bilin ve Bu Özelliklerin Ne Zaman Kullanılacağını Bilin

innerHTML ve outerHTML DOM özellikleri birçok benzerliğe sahiptir, ancak bir önemli fark vardır. innerHTML özelliği, bir öğenin HTML içeriğini yakalar. Buna karşılık, outerHTML özelliği, öğenin kendisini ve içeriğini temsil eden HTML'yi yakalar.

DOM aracılığıyla HTML içeriğini okumak ve yazmak için bu özellikleri kullanabilirsiniz. DOM, JavaScript geliştirme süreciniz boyunca ortak ve önemli bir kavram olacaktır.