Javascript & JQuery & CSS

1. after() ,insertAfter() 
    
    - 지정한 요소 뒤에 새로운 요소를 삽입

    - after()와 insertAfter()는 동일한 기능을 수행하지만, 삽입될 내용과 타겟의 위치가 다름.
    A.after(B) - A 뒤에 B를 추가
    A.insertAfter(B) - B 뒤에 A를 추가


2. before() ,insertBefore() 

    - 지정한 요소의 시작 부분에 내용을 삽입

    - before()와 insertBefore()는 동일한 기능을 수행하지만, 삽입될 내용와 타겟의 위치가 다름.
    A.before(B) - A 앞에 B를 추가
    A.insertBefore(B) - B 앞에 A를 추가

예제를 보도록 하겠습니다.
 

		<fieldset>
				<legend>Source</legend>
					<div id="source" style="background-color:red;">적용되어질 요소입니다.</div>
			</fieldset>

			<fieldset>
				<legend>Target</legend>
					<div id="target" style="background-color:gray;">타겟 요소입니다.</div>
			</fieldset>

			<input type="button" id="afterBtn" value="after"></input>
			<input type="button" id="insertAfterBtn" value="insertAfter"></input>
			<input type="button" id="beforeBtn" value="before"></input>
			<input type="button" id="insertBeforeBtn" value="insertBefore"></input>




			$('#afterBtn').click(function(){
				$('#target').after($('#source'));
			});

			$('#insertAfterBtn').click(function(){
				$('#source').insertAfter($('#target'));          //after와 타겟,소스 위치가 다름
			});

			$('#beforeBtn').click(function(){
				$('#target').before($('#source'));                          
			});

			$('#insertBeforeBtn').click(function(){
				$('#source').insertBefore($('#target'));      //before와 타겟,소스 위치가 다름
			});