jQuery 새 요소 생성

jQuery 새 요소 생성

예시 1: div 생성

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $(function() {
    $('#button-add-div').click(function() {
      $("<div>", {
        css: {
          width: "200px",
          height: "50px",
          backgroundColor: "skyblue",
          border: "1px solid royalblue"
        },
      }).appendTo("body");
    });
  });
</script>

<button id='button-add-div'>추가</button>

예시 2: text, click 포함

위 예시에 text와 click이벤트를 더함

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $(function() {
    $('#button-add-div').click(function() {
      $("<div>", {
        css: {
          width: "200px",
          height: "30px",
          backgroundColor: "yellow",
          border: "1px solid royalblue"
        },
        text: "안녕하세요 (클릭가능)",
        click: function() {
          alert('클릭됨');
        }
      }).appendTo("body");
    });
  });
</script>

<button id='button-add-div'>추가</button>

jQuery 새 요소 생성

목차

예시 1: div 생성

예시 2: text, click 포함

같이 보기

참고