태그 생성하기
document.createElement('태그종류')
텍스트 노드 생성하기
document.createTextNode('텍스트 내용')
태그 내에 텍스트 노드 내용 넣기
document.body.appendChild(~)
속성 추가하기
(1) '.' 활용
(2) setAttrbute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
var tag = document.createElement('h1')
var tagText = document.createTextNode('Bye')
// 여기까지는 h1 태그내에 hello가 들어가있지는 않다.
console.log(tag)
console.log(tagText)
tag.appendChild(tagText)
// 밑에 body 태그와 h1은 연결되어 있지 않은 상태다.
document.body.appendChild(tag);
// appendChile 를 통해, 텍스트 노드를 태그에 넣어준다.
let imgTag = document.createElement('img')
imgTag.src = "https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png"
// console.log(imgTag)
aTag = document.createElement('a')
//aTag.href = 'http://www.daum.net'
aTag.setAttribute('href', 'http://www.daum.net')
aTag.setAttribute('target', '_blank')
aTag.appendChild(imgTag)
document.body.appendChild(aTag)
console.log(aTag)
}
</script>
</head>
<body>
<h1>Hello</h1>
<img src = "https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png">
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 태그 가져오기(1) getElementById('id') VS getElementByTagName('td') (0) | 2020.06.19 |
|---|---|
| [JS] 태그 내용 제거하기(parentNode.removeChild) (0) | 2020.06.19 |
| [JS] DOM(문서객체모델) 기초 (0) | 2020.06.19 |
| [JS] 노래 재생, 정지해보기 (onclick 이벤트, button 활용) (0) | 2020.06.19 |
| [JS] BOM: 페이지 이동하기 및 onload 개념 (location, confirm, onload 활용) (0) | 2020.06.19 |
