jQuery에서 div 요소 만들기

jQuery에서 div 요소 만들기

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

jQuery document.createElement 등가물? (14개 답변)

닫힘4년 전에요.

「 」의 divjQuery의 요소?

jQuery 1.4에서는 다음과 같은 속성을 자체 닫힘 요소에 전달할 수 있습니다.

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

여기 Docs에 기재되어 있습니다.

예는 jQuery 1.4 Released에서 확인할 수 있습니다. 꼭 알아야 할 15가지 신기능

하시면 됩니다.append) (부모의 마지막 위치에 추가)prepend첫하려면): (부모의 첫 번째 위치에 추가합니다.)

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

다른 방법으로도 하실 수 있습니다..html() ★★★★★★★★★★★★★★★★★」.add()다른 답변에서 언급한 바와 같이

말하자면$('<div></div>')'를 하다div요소(구체적으로는 DIV DOM 요소)를 사용하지만 HTML 문서에는 추가하지 않습니다. 다른 이 되는 할예: ' 낫다'를 한다).append()（ 법) ）

조작 설명서에는 새 요소를 추가하는 방법에 대한 다양한 옵션이 나와 있습니다.

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

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

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

<div id="main"></div>

div를 만드는 간단한 방법은

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

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

이 모든 게 나한테 효과가 있었어

HTML 부품:

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

JavaScript 코드:

//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>

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

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

document.createElement('div');

여기 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>

메모리 내 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의 답변과 비슷하지만 속성 객체 선언에서 메서드 사용에 대한 적절한 예를 찾을 수 없었습니다.}

HTML 태그를 만들고 싶다면 예를 들어 다음과 같이 시도해 볼 수 있습니다.

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

플레이에 요소를 추가하고 싶다면 이 방법을 시도해 보십시오.

selectBody.append(div);

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

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

Jquery > 1.4 를 사용하고 있는 경우는, Ian 의 회답에 최적입니다.그렇지 않으면 다음 방법을 사용합니다.

이것은 셀로론의 대답과 매우 유사합니다만, 왜 그들이 그것을 사용했는지 모르겠습니다.document.createElementJquery 기 j j j j 。

$("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)를 혼합하여 사용하는데, 이는 보통 좋지 않은 아이디어입니다.

append() 대신 사용할 수도 있습니다.appendTo()구문이 다릅니다.

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

를 사용하여 개별 태그를 생성할 수 있습니다..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 데이터를 삽입합니다.다음으로 몇 가지 속성을 지정하여 목록의 하위 태그를 만듭니다.값을 변수에 할당했기 때문에 쉽게 추가할 수 있습니다.

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

그게 코드에 도움이 됐으면 좋겠어요. :) (사용하고 있습니다)

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

빈 div이면 충분합니다.

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

또는

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

그것은 같은 결과를 낳는다.

$(HTMLelement)성공할 수 있다.epmty div를 원하시면$('<div></div>');다른 요소도 같은 방법으로 설정할 수 있습니다.작성한 후 내부 HTML을 변경하려면html()방법.아웃터용사용할 수 있는 문자열로서의 HTML은 다음과 같습니다.

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;

사용할 수 있습니다..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>

이건 어때?여기서,pElement이 요소를 참조합니다.div(자식이 될! :) 안에.

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

그 이상의 것은 간단하게 추가할 수 있습니다.div문자열 - Attributes, Content에서 이름을 지정합니다.속성값에는 올바른 따옴표를 사용해야 합니다.

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

다음 구문을 따릅니다.

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

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

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

심각한 거예요?아니요. 하지만 이 구문은 $("<div><div><div>)보다 더 낫고, 그 돈치고는 아주 좋은 값입니다.

(정답은 부분적으로 복사되었습니다.jQuery document.createElement 등가)

언급URL : https://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery