[jQuery] 엘리먼트 생성하기

Published: 2013-11-21 by 놀이터흙이제맛

• Categories:
• jquery 13

• Tags:
• element 2
• javascript 81
• jquery 13
• node 1

String

$("#do3").click(function () {
  $("#result3").append("<div id='field'>안녕? 나는 div</div>");
});

jQuery Object

var obj = {label: 'some object'};
$("#do2").click(function () {
  $("#result2").append($('<div>', {
    id: 'field',
    text: '새로 생성된 div',
    data-obj: obj;
  }));
});

주의: 태그 속성을 위처럼 작성하면 자바스크립트 객체(위 예시에서는 obj)는 객체 자체가 아니라 객체의 toString() 실행 결과가 할당된다.

jQuery Object-Function 사용

$("#do2").click(function () {
  $("#result2").append(function () {
    return $('<div>', {id: 'field', text: '새로 생성된 div'});
  });
});

// 위를 응용하면...
function createEle(i, value) {
    return $('<div>', {id: 'field' + i, text: value});
}

jQuery(document).ready(function () {
    $("#do").click(function () {
        $('#result').append(createEle(1, 'hello, world!'));
    });
});

method call chaining

var obj = {label: 'some object'};
$("#do3").click(function () {
    $("<img>").attr("src","test.gif").data('obj', obj).append("body");
});