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);
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 |