1. 데이터 값을 HTML에 출력하는 방법 (DOM 형식)
<input type="button" value="출력" onclick="view()">
<div id="box">
html 연습
</div>
<input type="button" value="출력" onclick="view2()">
<ul id="data">
</ul>
function view() {
var box = document.getElementById("box");
box.innerHTML = "<span class='a'>Javascript 데이터 값</span>";
}
function view2(){
var data = document.getElementById("data");
var w = 1;
while(w<=10){
data.innerHTML += "<li>"+w+"</li>";
w++;
}
}
- innerText :문자만 출력 (기존 데이터는 사라질 수 있음)
- innerHTML : HTML태그와 함께 출력 (기존 데이터는 사라질 수 있음)
- inner 사용시 "",''의 역할이 있으므로 주의해서 사용
- box.innerText = "Javascript 데이터 값";
<input type="text" id="tel">
<input type="button" value="인증번호 받기" onclick="telok()">
<div id="se"></div>
function telok(){
var tel = document.getElementById("tel");
var se = document.getElementById("se");
if(tel.value!=""){
//HTML코드를 javascript에서 생성하여 출력시키는 방식
se.innerHTML = "<input type='text' id='seno'>\
<input type='button' value='인증확인' onclick='aaa()'>";
}else{
alert("휴대폰 번호를 입력하세요");
}
}
- \ (역슬래시) : 한줄짜리를 두줄로 만들어 보기쉽게할때 사용
2. 데이터 값을 HTML에 출력하는 방법 (NODE형식)
- 실무에서는 dom보다 node를 더 많이 씀
- dom은 li쓰면 데이터가 날아가지만 node는 안날아감
<input type="button" value="노드 앞에 추가" onclick="a()">
<input type="button" value="노드 뒤에 추가" onclick="b()">
<input type="button" value="노드 중간에 추가" onclick="c()">
<input type="button" value="노드 뒤에 HTML 추가" onclick="d()">
<ul id="user">
<li>이순신</li>
<li>유관순</li>
<li>장보고</li>
</ul>
<br><br><br>
<div id="box"></div>
<input type="button" value="인증메일 발송" onclick="z()">
<br><br><br>
var user = document.getElementById("user");
function a() { //노드 앞에 추가
var html = document.createElement("li");
var data = document.createTextNode("홍길동");
html.append(data);
//user.insertBefore(html, user.childNodes[0]); 아래와 같은 코드
user.insertBefore(html, firstChild);
}
function b() { //노드 뒤에 추가
var html = document.createElement("li");
var data = document.createTextNode("강감찬");
html.append(data);
user.appendChild(html);
//lastChild 맨 마지막 데이터 노드
}
function c() { //노드 중간에 추가
var html = document.createElement("li");
var data = document.createTextNode("김유신");
html.append(data);
user.insertBefore(html, user.children[2]);
}
function d() { //노드 뒤에 HTML 추가
var html = document.createElement("li");
var data = "<span>세종대왕</span>";
user.innerHTML = data;
user.append(html);
}
function z() {
var box = document.getElementById("box");
var html = document.createElement("input");
html.type = "text";
html.id = "email";
html.name = "email";
html.className = "mail";
box.append(html);
}
- innerHTML, innerText => DOM : 기존에 있는 데이터에서 덮어쓰기가 기본
- append, appendChild, insertBefore => NODE : 데이터를 추가
- createElement : 태그를 생성하는 함수
- createTextNode : 태그 안에 문자 데이터를 적용할 경우
- append : 해당 오브젝트에 추가(문자, 태그)
- insertBefore : 노드 기준 상위에 데이터를 추가
- append, insertBefore : HTML태그를 문자로 인식
😊응용문제
생성할 노드 갯수에 숫자를 하나 입력
노드생성 버튼을 클릭시 다음과 같은 태그로 노드개수큼 생성되도록 코드 작성
예시) 3을 입력후 버튼 클릭시
<input type="checkbox" id="test1">정답1
<input type="checkbox" id="test2">정답2
<input type="checkbox" id="test3">정답3
생성할 노드 갯수 : <input type="text" id="nid">
<input type="button" value="노드생성" onclick="make_node()">
<div id="node"></div>
function make_node() {
//var tag = document.createElement("span");
var node = document.getElementById("node"); //출력하는 곳
var n = document.getElementById("nid"); //사용자 입력값
//node.append(tag);
for (var i = 1; i <= n.value; i++) { //.value 실수 주의!!!
var html = document.createElement("input");
var data = document.createTextNode("정답"+i);
var brtag = document.createElement("br");
html.type = "checkbox";
html.id = "test"+i;
node.append(html);
node.append(data);
node.append(brtag);
//tag.append(html);
//tag.append(data);
}
}
- createElement : <태그></태그>가 기본 => 태그를 닫아버림
- 닫으면 중간에있는 "정답"+i가 출력안됨
- input 사용시 주의해야하며 텍스트가 노출되지 않는 버그가 있을 수 있음
- 해결방안
- 1. 아래처럼 이어서 append
- 2. 바깥에 태그로 감싸기
목록 생성에 사용자가 입력한 숫자만큼 리스트가 출력되도록 합니다.
클릭버튼을 핸들링할 경우 다음과 같이 코드가 생성되도록 하시오.
예시) 4입력시
<select>
<option value="1">1EA</option>
<option value="2">2EA</option>
<option value="3">3EA</option>
<option value="4">4EA</option>
</select>
목록 생성 : <input type="text" id="no">
<input type="button" value="click" onclick="make_option()">
<div id="box"></div>
function make_option() {
var sel = document.createElement("select");
var box = document.getElementById("box");
var n = document.getElementById("no");
box.append(sel);
sel.id="selid";
for (var i = 1; i <= n.value; i++) {
var opt = document.createElement("option");
var data = document.createTextNode(i+"EA");
opt.value = i;
opt.append(data);
selid.append(opt);
//selid.append(data); 이거슨 나의 바보코드!!! 왜 셀렉트에 때렸니!!!!
}
}