20211104 appendChild

- 선택된 객체에 appendChild 의 인수의 객체를 삽입.

 

1.

<div id="topDiv">
		<span class="myText">안녕하세요.</span>
	</div>
	-----------------------------------------
	<div id="bottomDiv"></div>
	<button type="button" id="upBtn">위</button>
	<button type="button" id="dwBtn">아래</button>

var topDiv = document.querySelector('#topDiv');
	var bottomDiv = document.querySelector('#bottomDiv');
	var upBtn = document.querySelector('#upBtn');
	var dwBtn = document.querySelector('#dwBtn');
	
	upBtn.addEventListener('click', function(){
		var myText = bottomDiv.querySelector('.myText');
		if(myText !=undefined){
			topDiv.appendChild(myText);
		}
	})
	
	dwBtn.addEventListener('click', function(){
		var myText = topDiv.querySelector('.myText');
		if(myText !=undefined){
			bottomDiv.appendChild(myText);
		}
	})

 

 

2. 예시

<select multiple="multiple" id="selectLeft" style="width : 100px;">
		<option value="홍길동">홍길동</option>
		<option value="이순신">이순신</option>
		<option value="유관순">유관순</option>
	</select>
	<button type="button" id="moveLeft"> ◀  </button>
	<button type="button" id="moveRight"> ▶ </button>
	<select multiple="multiple" id="selectRight" style="width : 100px;">
	</select>

		var selectLeft = document.querySelector('#selectLeft');
		var moveRight = document.querySelector('#moveRight');
		var moveLeft = document.querySelector('#moveLeft');
		var selectRight = document.querySelector('#selectRight');
		
		moveRight.addEventListener('click', function(){
			var options = selectLeft.querySelectorAll('option');
			console.log(options);
			for(var i=0; i<options.length; i++){
				console.log(options[i].selected);
				if(options[i].selected){
					selectRight.appendChild(options[i]);
				}
			}
		});
		
		moveLeft.addEventListener('click', function(){
			var options = selectRight.querySelectorAll('option');
			console.log(options);
			for(var i=0; i<options.length; i++){
				console.log(options[i].selected);
				if(options[i].selected){
					selectLeft.appendChild(options[i]);
				}
			}
		});

1) options 이 선택되어 있으면 true, 선택이 되어있지 않으면 false 를 반환한다.

var options = selectLeft.querySelectorAll('option');
console.log(options[i].selected)

2) 옵션이 선택되어 있으면 오른쪽으로 appendChild를 실행.

 - 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.

if(options[i].selected){
		selectRight.appendChild(options[i]);
				}