it-swarm-ko.tech

JQuery에서 div 요소 만들기

jQuery 에 어떻게 div 요소를 만들 수 있습니까?

1444
useranon

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

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

또는 different answer 에서 언급 한 .html() 또는 .add()을 사용할 수 있습니다.

1002
cm2

JQuery 1.4에서는 다음과 같이 self-closed 요소에 속성을 전달할 수 있습니다.

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

여기는 Docs

예제는 jQuery 1.4 Released : 출시 예정인 15 가지 새로운 기능에서 찾을 수 있습니다.

1933
ian

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

조작 설명서 는 새로운 요소를 추가하는 방법에 대한 다양한 옵션을 제공합니다.

227
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();
});
188
celoron
div = $("<div>").html("Loading......");
$("body").prepend(div);    
78
Ish
$("<div/>").appendTo("div#main");

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

62
Caius

Div를 만드는 간단한 방법은 다음과 같습니다.

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

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

56
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>
55
Hoque
$("<div/>").attr('id','new').appendTo('body');    

이렇게하면 body에 id가 "new"인 새 div가 생성됩니다.

36
Ajay
document.createElement('div');
25
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>
18
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의 대답과 비슷하지만 메서드 사용을 올바르게 처리하는 예제를 찾지 못했습니다. within 속성 개체 선언이 있습니다.

15
Roko C. Buljan

단순히 HTML 태그를 만들려는 경우이를 시도 할 수 있습니다

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

만약 당신이 flay에 어떤 요소를 추가하고 싶다면 이것을 시도 할 수 있습니다.

selectBody.append(div);
9
MEAbid
<div id="foo"></div>

$('#foo').html('<div></div>');
8
egaga

또는 append ()에 다른 구문을 가진 appendTo()을 사용할 수도 있습니다 :

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

Jquery> 1.4를 사용하고 있다면, { Ian 's answer 을 사용하는 것이 가장 좋습니다. 그렇지 않으면이 방법을 사용합니다.

이것은 celoron 's answer 와 매우 비슷하지만 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 문자열에 오타가 쉽게 포함될 수 있기 때문입니다. 또한, 마크 업 언어 (HTML)와 프로그래밍 언어 (Javascript/Jquery)를 섞어 사용합니다. 이는 일반적으로 나쁜 아이디어입니다.

6
nst1nctz

.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 데이터를 삽입합니다. 다음으로, 목록의 자식 태그를 만들고 속성을 제공합니다. 변수에 값을 할당하여 쉽게 추가 할 수 있습니다.

4
Shruthi Acharya

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

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

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

이제 HTML 을이 추가 된 test div에 추가하십시오.

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

빈 div 인 경우에는 충분합니다.

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

또는

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

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

1
Vennsoh

코드가 도움이되기를 바랍니다. :) (나는 사용한다)

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);
}
1
Cagdas

$(HTMLelement) 성공할 수 있습니다. epmty div를 원하면 $('<div></div>');으로 사용하십시오. 또한 같은 방법으로 다른 요소를 설정할 수 있습니다. 생성 된 후에 내부 HTML을 변경하려면 html() 메서드를 사용할 수 있습니다. 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;
1
Kamuran Sönecek

.add()을 사용하여 새jQueryobject을 만들고 대상 요소에 추가 할 수 있습니다. 체인을 사용하여 더 진행하십시오.

Eg 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>
0
Tushar