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

Question

이 질문은 이미 여기에 답이 있습니다.

• jQuery document.CreateErement 동등? 13 답변

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

Answer 1

당신이 사용할 수있는 append (부모의 마지막 위치에 추가하려면) 또는 prepend (부모의 주먹 위치를 추가하려면) :

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

또는 사용할 수 있습니다 .html() 또는 .add() a에서 언급했듯이 다른 대답.

Answer 2

jQuery 1.4 기준으로 속성을 다음과 같은 자체 폐쇄 요소로 전달할 수 있습니다.

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

여기에 있습니다 문서

예를 찾을 수 있습니다 jQuery 1.4 릴리스 : 당신이 알아야 할 15 가지 새로운 기능 .

Answer 3

기술적으로 $('<div></div>') '생성'a div 요소 (또는 더 구체적으로 div dom 요소)이지만 HTML 문서에 추가하지 않습니다. 그런 다음 다른 답변과 함께 사용하여 실제로 유용한 작업을 수행해야합니다 (예 : append() 방법이나 같은).

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

Answer 4

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();
});

Answer 5

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

Answer 6

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

공백 div를 추가 할 것입니다 <div id="main"></div>

Answer 7

Div를 만드는 짧은 방법은입니다

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

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

Answer 8

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

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>

Answer 9

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

이것은 신체에 ID "New"가 포함 된 새로운 Div를 만들 것입니다.

Answer 10

document.createElement('div');

Answer 11

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>

Answer 12

Memory 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의 답변과 유사하지만 방법 사용을 올바르게 다루는 예는 발견되지 않았습니다. 이내에 속성 객체 선언이 있으므로 가십시오.}

Answer 13

간단히 HTML 태그를 만들려면 예를 들어이 시도를 시도 할 수 있습니다.

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

플레이에 요소를 추가하려면 이것을 시도 할 수 있습니다.

selectBody.append(div);

Answer 14

<div id="foo"></div>

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

Answer 15

jQuery> 1.4를 사용하는 경우 이안의 대답. 그렇지 않으면이 방법을 사용합니다.

이것은 매우 유사합니다 Celoron의 대답, 그러나 나는 그들이 왜 사용했는지 모르겠습니다 document.createElement jQuery 표기법 대신.

$("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)를 혼합하여 일반적으로 나쁜 생각입니다.

Answer 16

또는 부록 ()에도 사용할 수도 있습니다 appendTo() 다른 구문이 있습니다.

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

Answer 17

당신은 그것을 사용하여 별도의 태그를 만들 수 있습니다 .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 데이터를 삽입하고 있습니다. 다음으로, 나는 일부 속성을 제공 한 목록의 자식 태그를 만들고 있습니다. 값을 변수에 할당하여 쉽게 추가하기가 쉽습니다.

Answer 18

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

id div_id로 div 요소에 테스트 div를 추가하려면 :

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

이제 추가하십시오 HTML 이 추가 된 테스트 div :

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

Answer 19

그것이 빈 Div라면 충분합니다.

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

또는

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

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

Answer 20

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

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

Answer 21

$(HTMLelement) 성공할 수 있습니다. epmty div를 원한다면 사용하십시오 $('<div></div>');. 또한 동일한 방법으로 다른 요소를 설정할 수 있습니다. 생성 후 내부 HTML을 변경하려면 사용할 수 있습니다. html() 방법. out auterhtml을 문자열로 얻으려면 사용할 수있는 것과 같습니다.

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;

Answer 22

당신이 사용할 수있는 .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>

Answer 23

이건 어때? 여기, pElement 원하는 요소를 나타냅니다 div 내부 (자녀가되기 위해! :).

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

당신은 그것에 더 쉽게 추가 할 수 있습니다 div 문자열 - 속성, 내용, 이름을 지정합니다. 속성 값의 경우 올바른 따옴표를 사용해야합니다.

Answer 24

방금 작은 것을 만들었습니다 jQuery 플러그인 그에 대한.

구문을 따릅니다.

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

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

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

심각합니까? 아니요. 그러나이 구문은보다 낫습니다 $ ( "u003Cdiv>u003C/div> "), 그리고 그것은 그 돈에 아주 좋은 가치입니다.

(부분적으로 복사 한 답변 : jQuery document.CreateErement 동등?)