문서 트리에 새 노드를 추가 하거나 기존 노드를 삭제할 수 있다.
간단한 컨텐츠 편집은 innerHTML을 사용
복잡한 컨텐츠 변경은 다음 접근 방법을 활용한다.
새로운 노드 추가하기
appendChildtest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>노드의 신규작성</title>
<script type="text/javascript">
function add(f) {
var anchor = document.createElement('a'); //태그 생성
anchor.href= f.url.value; //태그에 속성 지정
/*var href = document.createAttribute('href');
href.nodeValue = f.url.value;
anchor.setAttributeNode(href);*/
var name = document.createTextNode(f.name.value);
anchor.appendChild(name);
var br = document.createElement('br');
var list = document.getElementById('list');
list.appendChild(anchor); //리스트 노드에 자식으로 추가
list.appendChild(br); //리스트 노드에 자식으로 추가
/*list.insertBefore(br, list.firstChild);
list.insertBefore(anchor, br);*/
}
</script>
</head>
<body>
<form>
<label>사이트 명：<br />
<input type="text" name="name" size="30" /></label><br />
<label>URL：<br />
<input type="text" name="url" size="50" /></label><br />
<input type="button" value="추가" onclick="add(this.form)" />
</form>
<div id="list"></div>
</body>
</html>
|
cs |
실행결과
요소/텍스트 노드 작성하기
create관련 메서드
|
메서드 |
생성되는 노드 |
|
createElement(요소명) |
태그 요소 노드 |
|
createAttributes(속성명) |
속성 노드 |
|
createTextNode(텍스트) |
텍스트 노드 |
|
createCDATASection(텍스트) |
CDATA 섹션 |
|
createComment(텍스트) |
코멘트 노드 |
|
createEntityReference(객체명) |
실제 객체 참조 노드 |
|
createProcessingInstruction(처리명령코드) |
처리 명령 노드 |
|
createDocumentFragment() |
문서의 단편 |
노드들을 생성한 후 알맞게 조립하면 된다.
node.appendChild(추가할노드)
자식으로 추가한다. 기존의 자식 노드가 있다면 제일 마지막에 추가
node.insertBefore(추가할 노드, 기준 노드)
추가할 노드를 기준노드 앞에 삽입한다.
마지막 노드로 추가하고 싶다면 두 번째 인자를 null로 한다.
자식들 중 맨 앞에 추가하고 싶을 경우
list.insertBefore(br, list.firstChild);
list,insertBefore(anchor, br);
속성 노드 치환하기
태그 요소에 적용될 속성 노드도 추가가 가능하다.
속성과 동일한 이름의 프로퍼티를 설정하면 된다.
속성을 문자열로 지정할 수 있으므로 "스크립트로부터 동적으로 속성 이름을 변경할 수 있다.
예제) anchor.href= f.url.value;
위 속성 추가 코드를 다음과 같이 변경할 수 있음.
var href = document.createAttribute("href");
href.nodeValue = f.url.value; //속성 노드의 값을 지정
anchor. setAttributeNode(href); //노드에 속성 지정
'교육자료 > Javascript' 카테고리의 다른 글
| 18-5. 이벤트 처리 고급 (0) | 2019.05.13 |
|---|---|
| 18-4. 스타일시트 조작하기 (0) | 2019.05.13 |
| 18-2. 속성 값 가져오기 (0) | 2019.05.13 |
| 18-2. DOM특정 노드 참조하기 (0) | 2019.05.13 |
| 18-1. DOM(Document Object Model) (0) | 2019.05.13 |