JavaScript 에서 엘리먼트 하위에 여러개의 반복되는 하위 엘리먼트가 잇을경우
내가 원하는 위치에 엘리먼트를 넣고 싶을 경우가 있다.
보통 지정된 인덱스 위치에 값을 넣기 위해서는 다음과 같은 방법으로 값을 입력하면 된다.
아래 파란색 영역은 다음과 같은 해설을 줄 수 있다.
내가 원하는 위치에 엘리먼트를 넣고 싶을 경우가 있다.
보통 지정된 인덱스 위치에 값을 넣기 위해서는 다음과 같은 방법으로 값을 입력하면 된다.
아래 파란색 영역은 다음과 같은 해설을 줄 수 있다.
1. "subBlock" 라는 아이디를 가진 엘리먼트에 입력하는데
2. liObj라는 새로 추가할 엘리먼트를,
3. liBlock[0]번째 엘리먼트 이전에 넣어라. (만약 2번째 엘리먼트로 새 엘리먼트를 추가하고자 할경우에는 liBlock[1]이라고 해주면 될 것이다.)
ArrayIndexOutOfBound를 주의해야 할 것이다.
2. liObj라는 새로 추가할 엘리먼트를,
3. liBlock[0]번째 엘리먼트 이전에 넣어라. (만약 2번째 엘리먼트로 새 엘리먼트를 추가하고자 할경우에는 liBlock[1]이라고 해주면 될 것이다.)
ArrayIndexOutOfBound를 주의해야 할 것이다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript">
<!--
window.onload = function() {
var liObj = document.createElement("<li>");
var textObj = document.createTextNode("Hello 1111");
liObj.appendChild(textObj);
iBlock = document.getElementById("subBlock");
liBlock = iBlock.getElementsByTagName("li");
alert('length ' + liBlock.length);
document.getElementById("subBlock").insertBefore(liObj, liBlock[0]);
}
// -->
</script>
</head>
<body>
<div id="result"></div>
<div id="mainBlock">Sample
<ul id="subBlock">
<li>hello11</li>
<li>hello12</li>
<li>hello13</li>
</ul>
<li>TEST</li>
program</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript">
<!--
window.onload = function() {
var liObj = document.createElement("<li>");
var textObj = document.createTextNode("Hello 1111");
liObj.appendChild(textObj);
iBlock = document.getElementById("subBlock");
liBlock = iBlock.getElementsByTagName("li");
alert('length ' + liBlock.length);
document.getElementById("subBlock").insertBefore(liObj, liBlock[0]);
}
// -->
</script>
</head>
<body>
<div id="result"></div>
<div id="mainBlock">Sample
<ul id="subBlock">
<li>hello11</li>
<li>hello12</li>
<li>hello13</li>
</ul>
<li>TEST</li>
program</div>
</body>
</html>
'WEB_Programming > Javascript' 카테고리의 다른 글
| JQuery 기본 Selector (0) | 2009.01.25 |
|---|---|
| JavaScript 습작... (0) | 2008.10.15 |
| [HTML] 동영상 플레이 처리하기 (0) | 2008.07.30 |
| [JavaScript]이미지 버튼 스크롤 (0) | 2008.07.19 |
| Javascript에서 쿠키 처리하기 (0) | 2008.07.18 |