[WEB]JS-자바스크립트로 HTML 추가 생성하기

자바스크립트로 HTML 생성하기

 

  <div id="container">여기안에 새로운 HTMl 생성</div>

 document.createElement("생성할 태그");

스크립트를 넣어줄 div 태그를 하나 만들어 준다

생성할 태그 안에 p를 넣어주면 p태그로 생서이 되고

h1을 넣어주면 h1 태그의 형식으로 HTML이 만들어진다

    <script>
      var a = document.createElement("p"); //p태그를 생성
      a.innerHTML = "p태그 생성완료!";
      document.querySelector("#container").appendChild(a); //p 태그를 id=container 안에 추가해줌
    </script>

왼쪽 <p> / 오른쪽 <h1>

 document.querySelector("#container").appendChild(a);

 

innerHTML은 문장을 덮어써서

기존에 있던 텍스트를 지우고 작성된다

 

insertAdjacentHTML 문자형으로 HTML 추가하기

 

var 변수 안에 문자열을 통째로 저장하고

insertAdjacentHTML 을 사용해서 HTML을 추가하는 방법과

jQuery에서는 append()를 사용해서 문자열을 추가 해주는 방법이 있다.

      <div id="container">
        <h1>insertAdjacentHTML 로 문장 추가하기</h1>
      </div>
      
    <script>
      var a = "<p> insertAdjacentHTML : 태그 생성완료!</p>";
      document.querySelector("#container").insertAdjacentHTML("beforeend", a);
    </script>

 

 

insertAdjacentHTML(position, text) 의 형식으로 작성된다

postion 매개변수 값은

 

요소 바로 안에서 처음 자식 이전에 위치합니다.

"beforeend"

요소 바로 안에서 마지막 자식 이후에 위치합니다.

 

오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효

 

"afterend"

요소 이후에 위치

 

"beforebegin"

요소 이전에 위치합니다.

 

jQuery를 사용해서 문장을 추가 할 때

$("#container").append(a);

기존에 있는 문장을 지우고 문자열 자체를 통째로 넣으려면

      document.querySelector("#container").innerHTML = a;

기존에 있던 글을 사라지고 덮어씌워진다

 

문자열 작성할 때 TIP)

 

변수안에서 문자열을 작성할 때

Enter를 입력해서 작성하면 "",'' 들이 문자열로 만들어지지 않는다

그래서 `(Backtick:억음부호) 를 사용해서 글을 작성해줘야 한다

      var shop = `<option>XL</option>
        <option>XXL</option>`;