๐ปContent ์กฐ์๐ป
- Content ์กฐ์ํ๋ค๋ ๊ฒ์ ์์ ํ๊ทธ์ ๋ ํ๊ทธ ์ฌ์ด์ ๋ด์ฉ๋ฌผ(PCDATA, ์์(Element) ์กฐ์ํ๋ ๊ฒ์ด๋ค.
์ ๊ทผ๋ฒ
1. innerText
- ์์ ํ๊ทธ์ ๋ ํ๊ทธ ์ฌ์ด์ ๋ฌธ์์ด์ ์ฝ๊ณ ์ฐ๋ ํ๋กํผํฐ
- ๋ฌธ์์ด๋ง ์ธ์ํ๋ค.
- textContent์ ๋์ผํ ๊ธฐ๋ฅ์ํ์ง๋ง innetText๋ MS์์ ๋ง๋ ๋นํ์ค์ด๋ค.
2. innerHTML(โ )
- ์์ ํ๊ทธ์ ๋ ํ๊ทธ ์ฌ์ด์ ๋ฌธ์์ด์ ์ฝ๊ณ ์ฐ๋ ํ๋กํผํฐ
- ๋ฌธ์์ด๊ณผ ํ๊ทธ๋ฅผ ์ธ์ํ๋ค.
3. textContent
- ์์ ํ๊ทธ์ ๋ ํ๊ทธ ์ฌ์ด์ ๋ฌธ์์ด์ ์ฝ๊ณ ์ฐ๋ ํ๋กํผํฐ
- ๋ฌธ์์ด๋ง ์ธ์ํ๋ค.
- ํ์ค
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>content</h1>
<input type="button" value="๋ฒํผ" id="btn1">
<input type="button" value="๋ฒํผ" id="btn2">
<div id="div1">์ฝํ
์ธ ์์ญ</div>
</body>
</html>innerText ์ textContent
<script>
document.getElementById('btn1').onclick = m1;
function m1() {
var div1 = document.getElementById('div1');
//์ฝ๊ธฐ
alert(div1.innerText);
alert(div1.textContent);
//์ฐ๊ธฐ
div1.innerText = '์ฝ<b>ํ
</b>์ธ '
div1.textContent = '์ฝ<b>ํ
</b>์ธ '
}
</script>
innerText ์ textContent๋ ๋ฌธ์์ด๋ง ์ธ์ํ๋ฏ๋ก ํ๊ทธ๋ฅผ ๋ฌธ์์ด๋ก ์ถ๋ ฅํ๋ค.
innerHTML
<script>
document.getElementById('btn1').onclick = m1;
function m1() {
var div1 = document.getElementById('div1');
//์ฝ๊ธฐ
alert(div1.innerHTML);
//์ฐ๊ธฐ
// div1.innerHTML = '์ฝํ
์ธ ์์ 2';
div1.innerHTML = '์ฝ<b>ํ
</b>์ธ '
}
</script>
innerHTML์ ๋ฌธ์์ด๊ณผ ํ๊ทธ๋ฅผ ์ธ์ํ๋ฏ๋ก bํ๊ทธ๊ฐ ์ ์ฉ๋์ด ์ถ๋ ฅ๋์๋ค.
๋์ ์ผ๋ก ํ๊ทธ ์์ฑํ๊ธฐ(innerHTML)
<script>
//๋์ ์ผ๋ก ํ๊ทธ ์์ฑํ๊ธฐ
document.getElementById('btn2').onclick = m2;
function m2() {
if (document.getElementById('div1').innerHTML=='') {
div1.innerHTML += '<input type="text" value="์ฝํ
์ธ ">';
} else {
document.getElementById('div1').innerHTML='';
}
}
</script>
innerHTML์ ํ๊ทธ๋ฅผ ๋์ ํ์ฌ ๋์ ์ผ๋ก ์์ฑํ ์๋ ์๋ค.
๐ปํ ์ด๋ธ ๋์ ์ผ๋ก ์์ฑํ๊ธฐ๐ป
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset {
border: 1px solid #777;
width: 200px;
}
fieldset > label {
display: block;
margin-bottom: 10px;
}
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
margin-top: 20px;
}
#tbl1 td {
border: 1px solid gray;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>ํ
์ด๋ธ ์์ฑํ๊ธฐ</h1>
<fieldset>
<legend>ํ์ด</legend>
<label>ํ: <select id="selrow"></select></label>
<label>์ด: <select id="selcolumn"></select></label>
<input type="button" value="์์ฑํ๊ธฐ" id="btn1">
</fieldset>
<table id="tbl1"></table>
</body>
</html>
id๋ก ๊ฒ์ํ๊ธฐ
<script>
var selrow = document.getElementById('selrow');
var selcolumn = document.getElementById('selcolumn');
var btn1 = document.getElementById('btn1');
var tbl1 = document.getElementById('tbl1');
</script>
select box ์ต์ ์์ฑํ๊ธฐ(์ด๊ธฐํ)
<script>
for (var i=1; i<=10; i++) {
/* ๋ฐฉ๋ฒ1
var op = new Option();
op.value = i;
op.text = i;
*/
//๋ฐฉ๋ฒ2
//var op = new Option(i,i);
selrow.options.add(new Option(i,i));
selcolumn.options.add(new Option(i,i));
}
//๊ธฐ๋ณธ๊ฐ ์ค์
selrow.selectedIndex = 4;
selcolumn.selectedIndex = 4;
</script>
<tr>, <td> ๋์ ์์ฑํ๊ธฐ
<script>
btn1.onclick = m1;
function m1() {
var temp = ''; //๋์ ๋ณ์
for (var i=0; i<selrow.value; i++){ //ํ
temp += '<tr>';
for (var j=0; j<selcolumn.value; j++) { //์ด
temp += '<td>';
temp += i + ', ' + j;
temp += '</td>';
}
temp += '</tr>';
}
tbl1.innerHTML = temp;
}
</script>์ ์ฒด ์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset {
border: 1px solid #777;
width: 200px;
}
fieldset > label {
display: block;
margin-bottom: 10px;
}
#tbl1 {
border: 1px solid gray;
border-collapse: collapse;
margin-top: 20px;
}
#tbl1 td {
border: 1px solid gray;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h1>ํ
์ด๋ธ ์์ฑํ๊ธฐ</h1>
<fieldset>
<legend>ํ์ด</legend>
<label>ํ: <select id="selrow"></select></label>
<label>์ด: <select id="selcolumn"></select></label>
<input type="button" value="์์ฑํ๊ธฐ" id="btn1">
</fieldset>
<table id="tbl1"></table>
<script>
var selrow = document.getElementById('selrow');
var selcolumn = document.getElementById('selcolumn');
var btn1 = document.getElementById('btn1');
var tbl1 = document.getElementById('tbl1');
//selectbox ์ต์
์์ฑํ๊ธฐ
//select box ์ด๊ธฐํ
for (var i=1; i<=10; i++) {
/* ๋ฐฉ๋ฒ1
var op = new Option();
op.value = i;
op.text = i;
*/
//๋ฐฉ๋ฒ2
//var op = new Option(i,i);
selrow.options.add(new Option(i,i));
selcolumn.options.add(new Option(i,i));
}
//๊ธฐ๋ณธ๊ฐ ์ค์
selrow.selectedIndex = 4;
selcolumn.selectedIndex = 4;
btn1.onclick = m1;
//<tr>, <td> ๋์ ์์ฑํ๊ธฐ
function m1() {
var temp = ''; //๋์ ๋ณ์
for (var i=0; i<selrow.value; i++){ //ํ
temp += '<tr>';
for (var j=0; j<selcolumn.value; j++) { //์ด
temp += '<td>';
temp += i + ', ' + j;
temp += '</td>';
}
temp += '</tr>';
}
tbl1.innerHTML = temp;
}
</script>
</body>
</html>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ์ฐํด๋ฆญ, ๋๋ธ ํด๋ฆญ ๊ธ์ง (0) | 2023.10.10 |
|---|---|
| [JavaScript] Content ์กฐ์(2) ์์ฉ๋ฒ์ (0) | 2023.10.10 |
| [JavaScript] DOM์ ๊ธฐ์ด (0) | 2023.10.10 |
| [JavaScript] ์ผ์ ์๊ฐ ํ ํจ์ ์คํ : ํ์ด๋จธ(โ ) (0) | 2023.10.10 |
| [JavaScript] select box ํธ๋ค๋ง (0) | 2023.10.06 |
