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

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

---

나는 새로운 아이디어를 가지고 .html(content)

<div></div>이전에 원하는 장소에 빈칸을 넣을 수 있습니다 .이 DIV의 ID를 설정하는 것을 잊지 마십시오.

그런 $("#divId").html(content)다음 빈 DIV를 새 컨텐츠 (추가하려는 DIV)로 바꾸십시오.

---

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

---

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

---

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

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

수업 추가

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

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

참고 URL : https://stackoverflow.com/questions/10619445/the-preferred-way-of-creating-a-new-element-with-jquery