<javascript> 4. document 객체
by BFinecreateElement
<script>
onload = function () {
var elementNode = document.createElement("p");// <p><p/> 와 같음
var textNode = document.createTextNode("Hellow World!") // 글자생성
elementNode.appendChild(textNode); // p태그와 결합 in p
document.body.appendChild(elementNode);// body에 결합 in body
var imgNode = document.createElement("img");
imgNode.src = "./img/test.png";
imgNode.width = "1000";
imgNode.height = "590";
document.body.appendChild(imgNode);
var imgNode2 = document.createElement("img");
imgNode2.setAttribute("src","/img/test.png")
document.body.appendChild(imgNode);
}
</script>
innerHTML
<script>
onload=function(){ // 마지막에 실행
var str ="<p> Hellow </p> world";
document.body.innerHTML=str; // body 안에 입력됨
}
</script>
실행
getElementById
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload=function (){
var ck = document.getElementById("k"); // id가 k인 것을 불러온다
ck.setAttribute("value", 11);
}
</script>
</head>
<body>
<input type="button" id="k"
value="hellow"/>
</body>
실행
잠깐 hellow가 나왔다가 11로 변경된다.
ETC.
ck.parentNode.removeChild(ck); 객체 삭제
ck.style.~ : CSS 적용
'공부(2018~2019) - 스킨변경전 > Javascript' 카테고리의 다른 글
| <javascript> 5. event(2) (0) | 2018.03.28 |
|---|---|
| <javascript> 5. event (0) | 2018.03.27 |
| <javascript> 3. prototype , getter&setter (0) | 2018.03.26 |
| <javascript> 2. How to define Object (0) | 2018.03.26 |
| <javascript> 1. for~in, with, in (0) | 2018.03.26 |
블로그의 정보
57개월 BackEnd
BFine