jQuery로 새로운 요소를 생성하는 기본 방법

<div>using을 만들 수있는 두 가지 방법이 있습니다 jQuery.

어느 한 쪽:

var div = $("<div></div>");
$("#box").append(div);

또는:

$("#box").append("<div></div>");

재사용 성 이외의 다른 방법을 사용하면 어떤 단점이 있습니까?

첫 번째 옵션은 유연성을 제공합니다.

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

물론 그렇지 않은 .html('*')동안 내용을 재정의 .append('*')하지만 이것이 귀하의 질문이 아니라고 생각합니다.

또 다른 좋은 연습으로 jQuery를 변수를 접두어로한다 $:
jQuery를에 변수로 $를 사용하여 뒤에 특정의 이유가 있나요

"class"속성 이름을 따옴표로 묶으면 덜 유연한 브라우저와 더 호환됩니다.

저는 개인적으로 코드가 실행 가능 코드보다 읽고 편집 가능한 것이 더 중요하다고 생각합니다. 어느 쪽을보다 쉽게 ​​볼 수 있고 위의 요소에 대해 선택해야합니다. 다음과 같이 쓸 수 있습니다.

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

그리고 첫 번째 방법은 다음과 같습니다.

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

그러나 가독성에 관한 한; jQuery 접근 방식은 내가 가장 좋아하는 방법이다 . 이 유용한 jQuery 요령, 참고 및 모범 사례를 따르십시오

훨씬 더 표현적인 방식으로

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

참조 : 문서

jQuery 공식 문서 에 따르면

HTML 요소를 만들 $("<div/>")거나 $("<div></div>")선호합니다.

그럼 당신은 사용할 수 있습니다 중 하나 appendTo, append, before, after등 ,. DOM에 새 요소를 삽입합니다.

PS : jQuery 버전 1.11.x

3.4 의 문서에 따르면 attr()method 와 함께 속성을 사용하는 것이 좋습니다 .

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

jQuery를 사용하여 실제로 요소를 빌드하는 첫 번째 옵션을 권장합니다. 두 번째 접근 방식은 단순히 요소의 innerHTML 속성을 문자열로 설정합니다.이 문자열은 HTML이며 오류가 발생하기 쉽고 유연성이 떨어집니다.

#box비어 있으면 아무것도 없지만, 그렇지 않으면 매우 다른 일을합니다. 전자는 div의 마지막 자식 노드로 를 추가 할 것 입니다 #box. 후자는 내용을 #box하나의 빈 div텍스트와 모두로 완전히 바꿉니다 .

다음과 같은 방법으로 div 요소를 만들 수도 있습니다.

var my_div = document.createElement('div');

수업 추가

my_div.classList.add('col-10');

또한 수행 할 수 있습니다 append()및appendChild()