jQuery 새 요소 생성

jQuery 새 요소 생성

1 예시 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 예시 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>

3 같이 보기[ | ]

4 참고[ | ]