jQuery에서 div 요소 만들기 [중복]

질문자 :useranon

이 질문에는 이미 답변이 있습니다 .

jQuery document.createElement에 해당합니까? (14개 답변)

3년 전 문을 닫았습니다 .

jQuery div 요소를 어떻게 생성합니까?

jQuery 1.4부터 다음과 같이 자체 폐쇄 요소에 속성을 전달할 수 있습니다.

 jQuery('<div>', { id: 'some-id', class: 'some-class some-other-class', title: 'now this div has a title!' }).appendTo('#mySelector');

여기 문서에 있습니다

예제는 jQuery 1.4 Released: The 15 New Features you Must Know 에서 찾을 수 있습니다.

ian

append (부모의 마지막 위치에 추가) 또는 prepend (부모의 첫 번째 위치에 추가)를 사용할 수 있습니다.

 $('#parent').append('<div>hello</div>'); // or $('<div>hello</div>').appendTo('#parent');

또는 다른 답변 에서 언급한 .html() 또는 .add() 를 사용할 수 있습니다.

cm2

기술적으로 $('<div></div>') div 요소(또는 보다 구체적으로 DIV DOM 요소)를 '생성'하지만 HTML 문서에 추가하지는 않습니다. 그런 다음 실제로 유용한 작업을 수행하려면 다른 답변과 함께 이를 사용해야 합니다(예: append() 메서드 사용 등).

조작 문서 는 새 요소를 추가하는 방법에 대한 모든 다양한 옵션을 제공합니다.

samjudson

d = document.createElement('div'); $(d).addClass(classname) .html(text) .appendTo($("#myDiv")) //main div .click(function () { $(this).remove(); }) .hide() .slideToggle(300) .delay(2500) .slideToggle(300) .queue(function () { $(this).remove(); });

celoron

div = $("<div>").html("Loading......"); $("body").prepend(div);

Ish

$("<div/>").appendTo("div#main");

<div id="main"></div> 빈 div를 추가합니다.

Caius

div를 만드는 짧은 방법은

 var customDiv = $("<div/>");

이제 사용자 지정 div를 다른 div에 추가할 수 있습니다.

maxspan

이 모든 것이 나를 위해 일했습니다.

HTML 부분:

 <div id="targetDIV" style="border: 1px solid Red"> This text is surrounded by a DIV tag whose id is "targetDIV". </div>

자바스크립트 코드:

 //Way 1: appendTo() <script type="text/javascript"> $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom </script> //Way 2: prependTo() <script type="text/javascript"> $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top </script> //Way 3: html() <script type="text/javascript"> $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append </script> //Way 4: append() <script type="text/javascript"> $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo </script>

Nazmul

$("<div/>").attr('id','new').appendTo('body');

그러면 ID가 "new"인 새 div가 본문에 생성됩니다.

Ajay

document.createElement('div');

eomeroff

다음은 jQuery로 div를 만드는 또 다른 기술입니다.

요소 복제

페이지에 jQuery를 사용하여 복제하려는 기존 div가 있다고 가정합니다(예: 양식에서 입력을 여러 번 복제하기 위해). 다음과 같이 하면 됩니다.

 $('#clone_button').click(function() { $('#clone_wrapper div:first') .clone() .append('clone') .appendTo($('#clone_wrapper')); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="clone_wrapper"> <div> Div </div> </div> <button id="clone_button">Clone me!</button>

Steven Moseley

메모리 내 DIV 만들기

 $("<div/>");

클릭 핸들러, 스타일 등을 추가하고 마지막 으로 DOM 에 대상 요소 선택기에 삽입합니다.

 $("<div/>", { // PROPERTIES HERE text: "Click me", id: "example", "class": "myDiv", // ('class' is still better in quotes) css: { color: "red", fontSize: "3em", cursor: "pointer" }, on: { mouseenter: function() { console.log("PLEASE... "+ $(this).text()); }, click: function() { console.log("Hy! My ID is: "+ this.id); } }, append: "<i>!!</i>", appendTo: "body" // Finally, append to any selector }); // << no need to do anything here as we defined the properties internally.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_{ian의 답변과 유사하지만 속성 개체 선언 내 에서 메서드 사용을 적절하게 처리하는 예제를 찾지 못했으므로 여기로 이동합니다.}

Roko C. Buljan

예를 들어 HTML 태그를 만들고 싶다면 이것을 시도할 수 있습니다.

 var selectBody = $('body'); var div = $('<div>'); var h1 = $('<h1>'); var p = $('<p>');

플레이에 요소를 추가하려면 다음을 시도하십시오.

 selectBody.append(div);

MEAbid

<div id="foo"></div> $('#foo').html('<div></div>');

egaga

Jquery> 1.4를 사용하는 경우 Ian의 답변 이 가장 좋습니다. 그렇지 않으면 다음 방법을 사용합니다.

이것은 celoron의 답변 과 매우 유사하지만 Jquery 표기법 대신 document.createElement 를 사용한 이유를 모르겠습니다.

 $("body").append(function(){ return $("<div/>").html("I'm a freshly created div. I also contain some Ps!") .attr("id","myDivId") .addClass("myDivClass") .css("border", "solid") .append($("<p/>").html("I think, therefore I am.")) .append($("<p/>").html("The die is cast.")) }); //Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout! $("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

append() 사용하는 것이 더 읽기 쉽다고 생각합니다. 이제 즉시 본문에 무언가가 추가될 것이기 때문입니다. 그러나 그것은 코드나 텍스트를 작성할 때 항상 그렇듯이 취향의 문제입니다.

일반적으로 JQuery 코드에서는 HTML을 최대한 적게 사용합니다. 대부분이 스파게티 코드이기 때문입니다. HTML-String에는 오타가 쉽게 포함될 수 있기 때문에 오류가 발생하기 쉽고 유지 관리가 어렵습니다. 또한 마크업 언어(HTML)와 프로그래밍 언어(Javascript/Jquery)를 혼합하는데 이는 일반적으로 좋지 않은 아이디어입니다.

nst1nctz

append() 대신 다른 구문을 가진 appendTo()

 $("#foo").append("<div>hello world</div>"); $("<div>hello world</div>").appendTo("#foo");

davidman77

.jquery() 메서드를 사용하여 별도의 태그를 만들 수 있습니다. .append() 메서드를 사용하여 자식 태그를 만듭니다. jQuery는 체이닝을 지원하므로 두 가지 방법으로 CSS를 적용할 수도 있습니다. 클래스에서 지정하거나 .attr() 호출하십시오.

 var lTag = jQuery("<li/>") .appendTo(".div_class").html(data.productDisplayName); var aHref = jQuery('<a/>',{ }).appendTo(lTag).attr("href", data.mediumImageURL); jQuery('<img/>',{ }).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

먼저 div 태그에 목록 태그를 추가하고 JSON 데이터를 삽입합니다. 다음으로 일부 속성을 제공하여 list의 자식 태그를 생성합니다. 추가하기 쉽도록 변수에 값을 할당했습니다.

Shruthi Acharya

이것이 div를 추가하는 가장 좋은 방법이라고 생각합니다.

ID가 div_id인 div 요소에 테스트 div를 추가하려면:

 $("#div_id").append("div name along with id will come here, for example, test");

이제 이 추가된 테스트 div에 HTML을 추가합니다.

 $("#test").append("Your HTML");

Atul

코딩에 도움이 되길 바랍니다. :) (나는 사용한다)

 function generateParameterForm(fieldName, promptText, valueType) { //<div class="form-group"> //<label for="yyy" class="control-label">XXX</label> //<input type="text" class="form-control" id="yyy" name="yyy"/> //</div> // Add new div tag var form = $("<div/>").addClass("form-group"); // Add label for prompt text var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText); // Add text field var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName); // lbl and inp => form $(form).append(label).append(input); return $(form); }

Cagdas

빈 div이면 충분합니다.

 $("#foo").append("<div>")

또는

 $("#foo").append("<div/>")

동일한 결과를 제공합니다.

Vennsoh

$(HTMLelement) 성공할 수 있습니다. epmty div를 원하면 $('<div></div>'); . 또한 동일한 방법으로 다른 요소를 설정할 수 있습니다. 생성 후 내부 HTML을 변경하려면 html() 메서드를 사용할 수 있습니다. 사용할 수 있는 string으로 outerHTML을 얻으려면 다음과 같습니다.

 var element = $('<div/>'); var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>'); var outerHTML = element[0].outerHTML;

Kamuran Sönecek

.add() 를 사용하여 새 jQuery 객체 를 만들고 대상 요소에 추가할 수 있습니다. 그런 다음 체인을 사용하여 계속 진행합니다.

예를 들어 jQueryApi의 경우 :

 $( "div" ).css( "border", "2px solid red" ) .add( "p" ) .css( "background", "yellow" );

 div { width: 60px; height: 60px; margin: 10px; float: left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

Tushar

이것은 어떤가요? 여기에서 pElement div 내부에 원하는 요소를 나타냅니다(자식입니다! :).

 $("pElement").append("<div></div");

div 에 더 많은 것을 쉽게 추가할 수 있습니다. Attributes, Content, 이름을 지정합니다. 속성 값의 경우 올바른 따옴표를 사용해야 합니다.

Aravind Suresh

나는 그것을 위해 작은 jQuery 플러그인 을 만들었습니다.

구문을 따릅니다.

 var myDiv = $.create("div");

DOM 노드 ID는 두 번째 매개변수로 지정할 수 있습니다.

 var secondItem = $.create("div","item2");

심각합니까? 아니요. 그러나 이 구문은 $("<div></div>") 보다 낫고 그 비용에 대해 매우 좋은 가치입니다.

(부분적으로 복사한 답변: jQuery document.createElement에 해당합니까? )

ern0

출처 : http:www.stackoverflow.com/questions/867916/creating-a-div-element-in-jquery