appendChild kullanarak bir div elementinin içine p elementini eklemeye yarayan alternatif bir javascript kodudur.
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Javascript - div Elementi İçine p Elementi Ekle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">"content" class değerine sahip div (1)</div>
<div class="content">"content" class değerine sahip div (2)</div>
<script type="text/javascript" src="dosya.js"></script>
</body>
</html>
dosya.js
var parag = document.createElement("p");
var metin = document.createTextNode("appendChild ile eklendi.");
parag.appendChild(metin);
document.getElementsByClassName("content")[1].appendChild(parag);
dosya.js (Açıklamalı)
//--------------------------------------------------
//Yeni bir p nesnesi oluştur ve değişkene ata.
//--------------------------------------------------
var parag = document.createElement("p");
//--------------------------------------------------
//Elementin içine yazdırmak için TextNode oluştur.
//--------------------------------------------------
var metin = document.createTextNode("appendChild ile eklendi.");
//--------------------------------------------------
//Metnin içine yazıyı ekle.
//Bunu innerText veya innerHTML ile de halledebilirdik
//ama eklenecek metnin de element içindeki element gibi
//davranması örneğini görebilmek için iyi oldu.
//--------------------------------------------------
parag.appendChild(metin);
//--------------------------------------------------
//p elementimizi aynı class'a sahip
//div elementlerinden ikincisine ekle.
//--------------------------------------------------
document.getElementsByClassName("content")[1].appendChild(parag);
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir