원하는 속성, HTML 값 확인&변경 - before(), after(), prepend(), append()

원하는 속성, HTML 값 GET-SET

내가 원하는 위치에 HTML 삽입하기
html() 함수는 덮어쓰기를 하였다면 해당 함수들은 추가(INSERT)를 한다.

레이아웃을 삽입 해보자.

<body>
		<div id="layer1">
			<h2>첫번째 레이아웃</h2>
		</div>
		<div id="layer2">
			<h2>두번째 레이아웃 1</h2>
			<h2>두번째 레이아웃 2</h2>
			<h2>두번째 레이아웃 3</h2>
		</div>
		<div id="layer3">
			<h2>세번째 레이아웃</h2>
		</div>
</body>

before()

해당 HTML tag 상단에 태그를 추가한다.

<script type="text/javascript">
		$(function() {
				const html1 = '<div><h1>삽입된 레이아웃</h1></div>';
				$("#layer2").before(html1);
		});
</script>

개발자 도구(F12)

<body>
		<div id="layer1">
			<h2>첫번째 레이아웃</h2>
		</div>
		<div>
			<h1>삽입된 레이아웃</h1>
		</div>
		<div id="layer2">
			<h2>두번째 레이아웃 1</h2>
			<h2>두번째 레이아웃 2</h2>
			<h2>두번째 레이아웃 3</h2>
		</div>
		<div id="layer3">
			<h2>세번째 레이아웃</h2>
		</div>
</body

after()

해당 HTML tag 하단에 태그를 추가한다.

<script type="text/javascript">
		$(function() {
				const html1 = '<div><h1>삽입된 레이아웃</h1></div>
				$("#layer2").after(html1);
		});
</script>

개발자 도구(F12)

<body>
		<div id="layer1">
			<h2>첫번째 레이아웃</h2>
		</div>
		<div id="layer2">
			<h2>두번째 레이아웃 1</h2>
			<h2>두번째 레이아웃 2</h2>
			<h2>두번째 레이아웃 3</h2>
		</div>
		<div>
			<h1>삽입된 레이아웃</h1>
		</div>
		<div id="layer3">
			<h2>세번째 레이아웃</h2>
		</div>
</body

prepend()

해당 HTML tag의 최상단 자식 태그로 추가한다.

<script type="text/javascript">
		$(function() {
				const html2 = '<h1>삽입된 레이아웃</h1>';
				$("#layer2").prepend(html2);
		});
</script>

개발자 도구(F12)

<body>
		<div id="layer1">
			<h2>첫번째 레이아웃</h2>
		</div>
		<div id="layer2">
			<h1>삽입된 레이아웃</h1>
			<h2>두번째 레이아웃 1</h2>
			<h2>두번째 레이아웃 2</h2>
			<h2>두번째 레이아웃 3</h2>
		</div>
		<div id="layer3">
			<h2>세번째 레이아웃</h2>
		</div>
</body

append()

해당 HTML tag의 최하단 자식 태그로 추가한다.

<script type="text/javascript">
		$(function() {
				const html2 = '<h1>삽입된 레이아웃</h1>';
				$("#layer2").append(html2);
		});
</script>

개발자 도구(F12)

<body>
		<div id="layer1">
			<h2>첫번째 레이아웃</h2>
		</div>
		<div id="layer2">
			<h2>두번째 레이아웃 1</h2>
			<h2>두번째 레이아웃 2</h2>
			<h2>두번째 레이아웃 3</h2>
			<h1>삽입된 레이아웃</h1>
		</div>
		<div id="layer3">
			<h2>세번째 레이아웃</h2>
		</div>
</body