Jquery - 태그 생성하기(1) : 태그 생성, 태그 위치 설정

 

 

1. p태그 생성 : html함수 이용하기

<div id="container"></div>

<script>

$('div#container').html("<p>html태그로 만들기</p>");

</script>

 

 

2. 2. h3태그 생성하기

<script>

// ① $()를 이용하기
const h3=$("<h3>");

// ② 텍스트 넣기
h3=$("<h3>").text("$()방식으로 새로운 태그 생성");

// ③ div#container에 넣기
$("div#container").append(h3);

// 한줄로 완성
const h3=$("<h3>").text("$()방식으로 새로운 태그 생성").appendTo($("div#container"));
console.log(h3);

</script>

 

3. input값을 받아서 태그 추가하기

<input type="text" name="tag">
<input type="text" name="content">
<button onclick="addTag();">태그 추가하기</button>

<div id="container2"></div>

 

<script>

const addTag=()=>{
            const tag=$("input[name=tag]").val();
          
            const content=$("input[name=content]").val();
      
            //입력값으로 태그와 내용 적용하기
            const newTag=$("<"+tag+">").text(content);

            //div#container에 저장하기
            $("div#container2").append(newTag);
}
</script>

 

결과

 

 

 

4. 생성된 기존 태그에 연결하기

자식태그로 추가	append : 자식태그 맨 뒤에 추가	append()  예) 저장공간.append(추가할태그)
		appendTo() 예) (추가할태그).appendTo(저장공간)
	prepend : 자식태그 맨 앞에 추가	prepend() 예) 저장공간.prepend(추가할태그)
		prependTo() 예) (추가할태그).prependTo(저장공간)
형제태그로 추가	before : 같은 레벨의 지정태그 앞에 추가	before() 예) (저장공간).before(추가할태그)
		insertBefore() 예) (추가할태그).insertBefore()(저장공간)
	after : 같은 레벨의 지정태그 뒤에 추가	after() 예) (저장공간).after(추가할태그)
		insertAfter() 예) (추가할태그).insertAfter(저장공간)

 

[자식태그 추가 예시]

    <button onclick="appendTest();">맨 뒤 자식으로 추가하기</button>
    <button onclick="prependTest();">맨 앞 자식으로 추가하기</button>
    <button onclick="appendToTest();">맨 뒤 자식으로 추가하기</button>
    <button onclick="prependToTest();">맨 앞 자식으로 추가하기</button>
    <div id="container3">
        <h2 style="color: aqua;">기준태그</h2>
    </div>

 

<script>

const appendTest=()=>{

	// 태그와 내용저장하기
    	const h3=$("<h3>").text("생성된 태그");
            
  	 // div#container3 태그에 자식으로 저장하기
   	$("div#container3").append(h3);         
}

const appendToTest=()=>{

	const h3 = $("<h3>").text("appendTo로 추가하기").appendTo($("div#container3"));

}

const prependTest=()=>{

	// 태그와 내용저장하기
	const p=$("<p>").text("p 태그");

	// div#container3 태그에 자식으로 저장하기
	$("div#container3").prepend(p);       
  
}

  
const prependToTest=()=>{

            const h3 = $("<h3>").text("prependTo로 추가하기").prependTo($("div#container3"));
         
}
        
</script>

 

결과

 

---

[형제태그 추가 예시]

<button onclick="beforeTest();">앞에 추가하기</button>
<button onclick="insertBeforeTest();">앞에 추가하기(insert)</button>
<button onclick="afterTest();">뒤에 추가하기</button>
<button onclick="insertAfterTest();">뒤에 추가하기(insert)</button>

<div id="container4">
	<h2>기준태그</h2>
</div>

<style>
div#container4{
    border: 3px solid blue;
    width: 200px;
    height: 100px;
}
</style>

 

 <script>
        const beforeTest=()=>{
            const h4=$("<h4>").text("앞에 추가하기");
            // $("div#container4>h2").before(h4); //h2의 위(앞)에 추가됨
            $("div#container4").before(h4);//div의 위(앞)에 추가됨
        }

        const afterTest=()=>{
            const img=$("<img>").attr("src","https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487effd194bae87d73dd00522794070855d");
            //$("div#container4").after(img);
            $("div#container4>h2").after(img);
            //스타일에 overflow:hidden을 추가하면 범위에 벗어나면 짤린다
        }

        const insertBeforeTest=()=>{
            $("<h5>").text("h5 새로 추가하기").insertBefore($("div#container4"));
        }

        const insertAfterTest=()=>{
            const img=$("<img>").attr("src","https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab487effd194bae87d73dd00522794070855d");
            //$("div#container4").after(img);
            $("div#container4>h2").after(img);
            //스타일에 overflow:hidden을 추가하면 범위에 벗어나면 짤린다
        }

    </script>

 

결과

 

5. 태그 위치 변경하기 : 기존에 있는 태그

<div id="container5">
        <p>나는 p태그</p>
        <h4>나는 h4 태그</h4>
</div>

<button onclick="changePosition();">위치변경</button>

<script>
	const changePosition=()=>{
	  $("div#container5>*:last").insertBefore($("div#container5>*:first"));
	}
</script>

 

 

 

6. 태그 위치 변경하기 : 태그 입력후 지정된 위치 바꾸기

<input type="text" name="image">
<button onclick="addImg();">이미지추가</button>
<button onclick="changeImage();">위치변경</button>
<div id="imgcontainer"></div>

<script>

const changeImage=()=>{
            $("div#imgcontainer>img:first").appendTo($("div#imgcontainer"));
}
        
const addImg=(()=>{

    let count=0;
    return ()=>{
         if(count<3){
              const src=$("input[name=image]").val();
              const imgTag=$(`<img src='${src}' width='200' height=200>`);
              $("div#imgcontainer").append(imgTag);
         }else{
                    alert("이미지는 3개만 추가가능");
         }
         count++;
    }

})();

</script>