JavaScript ile HTML’ye Eleman Ekleme

JavaScript, web sayfalarında dinamik içerik oluşturmanın güçlü bir yoludur. Bu programlama dili sayesinde, kullanıcı etkileşimlerine dayalı olarak HTML sayfalarınızı güncelleyebilir ve yeni öğeler ekleyebilirsiniz. Bu makalede, JavaScript kullanarak HTML’ye eleman eklemeyi öğreneceksiniz.

HTML sayfanıza bir paragraf eklemek istediğinizi varsayalım. İlk olarak, HTML sayfanızın body bölümünde bu paragrafı içerecek bir element oluşturmanız gerekir. Bu amaçla, JavaScript’te createElement() işlevini kullanabilirsiniz.

“`javascript
const paragraf = document.createElement(‘p’);
“`

Bu kod satırı, “p” adında yeni bir paragraf elementi oluşturur. Şimdi, bu paragraf elementinin içeriğini belirlemeniz gerekiyor. Bunun için, JavaScript’te createTextNode() işlevini kullanabilirsiniz.

“`javascript
const paragrafIcerik = document.createTextNode(‘Bu bir örnek paragraf.’);
paragraf.appendChild(paragrafIcerik);
“`

Bu kod satırları, “Bu bir örnek paragraf.” içeriğine sahip bir paragraf elementi oluşturur ve oluşturduğumuz elementin içine ekler. Son olarak, bu paragraf elementini HTML sayfamızın body bölümüne eklememiz gerekiyor.

“`javascript
document.body.appendChild(paragraf);
“`

Bu kod satırı, oluşturduğumuz paragraf elementini HTML sayfamızın sonuna ekler. Böylece, JavaScript kullanarak HTML’ye bir paragraf eklemiş oluruz.

Ancak, JavaScript’i HTML sayfamıza eklemek için