JavaScript DOM 조작 ⑥ 「노드 추가」
1. 소개
이 기사에서는 JavaScript DOM 조작
노드 추가
에 대해 설명한다.
2. 노드란?
이전에 만든 기사 의 복습이 되지만,
노드란,
문장을 구성하는 요소, 속성, 텍스트 등의 객체.
· 요소 노드
· 속성 노드
· 텍스트 노드
일을 가리킨다. 또는,
DOM 트리의 개별 객체가 노드
라고도 말할 수 있다.
3. 노드 추가
추가 흐름
1. 요소, 텍스트 노드를 만듭니다.
createElement, createTextNode
2. 노드를 결합하여 문서에 추가합니다.
appendChild
createElement
설명
요소를 만듭니다.
구문
index.js
document.createElement(name);
※name:요소명
보충
노드를 작성하는 것만을 위해, 별도 계층에 추가하는 처리가 필요.
createTextNode
설명
텍스트 노드를 만듭니다.
구문
index.js
document.createTextNode(text);
※text:텍스트
보충
노드를 작성하는 것만을 위해, 별도 계층에 추가하는 처리가 필요.
appendChild
설명
지정된 요소를 현재 요소의 마지막 자식 요소로 추가합니다.
구문
index.js
element.appendChild(node);
※element:요소 객체
※node:추가하는 자 노드
반환값
추가한 자식 노드
4. 예제
내용
빈 목록, 버튼 배치
버튼을 클릭하면 목록의 항목이 추가됩니다.
추가되는 문자열은 "추가 문자열"이라고 가정합니다.
연습 전 튜토리얼
실천에 들어가기 전에 완성형을 먼저 표시해 둔다.
구조로서는 다음과 같이 되어 있다.
취득 버튼을 클릭하면, appenChild에서 추가된 추가 캐릭터 라인이 표시된다.
마크업
브라우저에 빈 리스트, 버튼을 표시하지 않으면 안 되기 때문에, HTML의 작성으로부터 착수한다.
index.html
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="lists"></ul>
<input type="button" value="取得" onclick="append()" />
<script src="js/index.js"></script>
</body>
</html>
마크업하여 브라우저로 표시하면 다음과 같다.
자바스크립트 설명
다음에 JavaScript를 마무리해 간다.
index.js
index.js
function append() {
let li = document.createElement('li');
let text = document.createTextNode('追加文字列');
li.appendChild(text);
lists.appendChild(li);
}
상기 구문에 관해서, 순서를 따라 해설해 나간다.
function append()
HTML 내의 input 태그에 있는 onclick 속성의 append로 함수를 작성해 간다.
let li = document.createElement('li');
li 요소 생성
let text = document.createTextNode('추가 문자열');
텍스트 노드 생성
li.appendChild(text);
li 태그의 요소에 텍스트 노드 (text) 추가
lists.appendChild(li);
id가 lists인 ul 태그에 li를 추가한다.
구체적으로,
브라우저에서 확인
실제로 브라우저에서 거동을 확인해 간다.
검증 결과,
검색 버튼을 클릭하면 브라우저에 문자열이 표시됩니다.
보충
id가 lists의 요소에 li 요소를 추가하는 과정에서,
index.js
let listsElement = document.getElementById('lists');
쪽이 일반적이다.
5. 결론
다음 항목: JavaScript DOM 조작 ⑦ 「노드의 치환」 다음.
Reference
이 문제에 관하여(JavaScript DOM 조작 ⑥ 「노드 추가」), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Stack_up_Rising/items/cae92b97899b1e9a7996텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
