본문 바로가기
2019/JavaScript

JS create Element

by SOLYI 2019. 12. 9.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//createElement : 태그 이름
//createTextNode : 태그 내용 입력.... 태그 속성..?정확한 명칭은 모르게음..ㅠ
//setAttribute : 태그 내부에 입력 
 
window.onload=function(){
    let h=document.createElement('h1');
    let txt=document.createTextNode('hello');
    h.appendChild(txt);
    //<h1>태그에 hello 입력
 
    let h2=document.createElement('h2');
    let txt2=document.createTextNode('hello2');
    h2.appendChild(txt2);
    //<h2>태그에 hello2 입력
 
 
    let img=document.createElement('img');
    img.setAttribute('src''../d1127/img/sunny3.jpg');
    img.setAttribute('alt','써니');
    //<img>태그 내부에 src, alt 입력
 
    let b = document.getElementsByTagName('body');
 
    b[0].appendChild(h);
    b[0].appendChild(h2);
    b[0].appendChild(img);
    //body에 h1, h2, img 태그 추가
}
 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//body 에 리스트 추가하는 방법
 
window.onload=function(){
    let result=document.getElementById('result');
    document.getElementById('add').onclick=function(){
        let name=document.getElementById('name');
        let li=document.createElement('li');
        let txt=document.createTextNode(name.value);
        li.appendChild(txt);
        result.append(li);
        name.value="";
 
       /* let b = document.getElementsByTagName('body');
 
        b[0].appendChild(ul);
        b[0].appendChild(li);*/
    }
}
 
반응형

'2019 > JavaScript' 카테고리의 다른 글

JS onchange  (0) 2019.12.09
JS addEventListener 연습  (0) 2019.12.09
JS add Event Listener (set Attribute)  (0) 2019.12.09
JS getElement  (0) 2019.12.09
JS Array  (0) 2019.12.06