[javaScript] .createElement() /.appendChild() /.createTextNode()

자바스크립트를 이용하여

HTML 요소를 동적으로 추가하기 

 

 

    // document.createElement를 사용해 a태그를 생성
    // ex: createElement('h1') 
    // ex: createElement('button')..

    // createElement - HTML에 <a> 태그 요소를 추가
    var veA = document.createElement("a");
    var veBtn = document.createElement("button");
    var veh3 = document.createElement("h3");

    // veBtn <a> 태그에 이름주기
    var veAText = document.createTextNode('버튼');
    var veBtnText = document.createTextNode('버튼');
    var veh3Text = document.createTextNode('h3');

    // appendChild - veBtn의 자식 요소로 넣기
    veA.appendChild(veAText);
    veBtn.appendChild(veBtnText);
    veh3.appendChild(veh3Text);

    // a태그에 id 주기
    veA.id = "veBtnId";
    veA.href = "#";

    // a태그에 클래스 이름 주기 
    // * className * 
    veA.className = "veBtnClassName";

    //veBtn body의 자식 요소로 넣기
    document.body.appendChild(veA);
    document.body.appendChild(veh3);    
    document.body.appendChild(veBtn);  

 

.createElement() : HTML <태그>에 원하는 요소 추가 

.appendChild() : 자식 요소로 넣기

.createTextNode() :  텍스트를 만들기 (이름값)

 

 

---

Test

---