복붙노트

[JQUERY] jQuery를에 div 요소를 생성 [중복]

JQUERY

jQuery를에 div 요소를 생성 [중복]

해결법

  1. 1.당신은 나 앞에 추가 (부모의 주먹 위치에 추가 할) (마지막으로 부모의 위치에 추가) APPEND 사용할 수 있습니다 :

    당신은 나 앞에 추가 (부모의 주먹 위치에 추가 할) (마지막으로 부모의 위치에 추가) APPEND 사용할 수 있습니다 :

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

    다른 답변에서 언급 한 바와 같이 다른 방법으로, ()는 .html 중에서 ()를 사용하거나 .add 수 있습니다.

  2. 2.jQuery를 1.4 당신은 너무 같은 자기 폐쇄 요소에 속성을 전달할 수 있습니다 :

    jQuery를 1.4 당신은 너무 같은 자기 폐쇄 요소에 속성을 전달할 수 있습니다 :

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

    여기에는 문서에

    예를 출시 jQuery를 1.4에서 찾을 수 있습니다 : 15 새로운 당신이 알아야 특징.

  3. 3.기술적으로 $ ( '
    ') div 요소 (또는 더 구체적으로 DIV DOM 요소)을 '만드는'하지만 HTML 문서에 추가되지 않습니다. 당신은 다음 사실에 다른 답변과 함께 것을 사용 (예 : APPEND () 메소드 또는 등을 이용하여 같은) 그것으로 유용한 아무것도 할 필요가있을 것이다.

    기술적으로 $ ( '

    ') div 요소 (또는 더 구체적으로 DIV DOM 요소)을 '만드는'하지만 HTML 문서에 추가되지 않습니다. 당신은 다음 사실에 다른 답변과 함께 것을 사용 (예 : APPEND () 메소드 또는 등을 이용하여 같은) 그것으로 유용한 아무것도 할 필요가있을 것이다.

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

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

  5. 5.

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

  6. 6.

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

    DIV에

    빈을 추가합니다

  7. 7.만드는 사업부의 간단한 방법은

    만드는 사업부의 간단한 방법은

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

    이제 사용자 정의 사업부는 다른 사업부에 추가 할 수 있습니다.

  8. 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>

  9. 9.

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

    이 본문에 ID가 "새로운"새로운 사업부를 생성합니다.

  10. 10.

    document.createElement('div');

  11. 11.다음은 jQuery를 함께 된 div를 생성하는 또 다른 기술이다.

    다음은 jQuery를 함께 된 div를 생성하는 또 다른 기술이다.

    ELEMENT 클로닝

    당신은 당신이 jQuery를 사용하여 복제에 원하는 페이지에서 기존 사업부를 말한다 (예를 들어 입력을 형태로 여러 번 중복). 당신은 너무로 다음 할 것입니다.

    $ ( '#의 clone_button'). ((기능을 클릭) { $ ( '#의 clone_wrapper의 사업부 : 첫 번째') .clone () 으로 .Append ( '클론') .appendTo ($ ( '#의 clone_wrapper')); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    사업부 <버튼 ID = "clone_button"> 복제 나!

  12. 12.메모리 내 DIV 만들기

    메모리 내 DIV 만들기

    $("<div/>");

    : 대상 요소 선택기로 DOM에 삽입 마침내과 - 클릭 핸들러, 스타일 등 추가

    $ ( "

    ", { 여기 // 특성 텍스트 : "저를 클릭" ID : "예" "클래스": "myDiv", // ( '클래스는'아직 더 나은 따옴표입니다) CSS : { 색상 : "빨간색", fontSize는 "3em" 커서 : "포인터" }, 의 위에: { mouseenter : 함수 () { 을 console.log ( "제발 ..."+ $ (이)는 .text ()); }, 클릭 기능 () { 을 console.log ( "! 숨바꼭질 내 ID는 :"+ this.id); } }, 추가합니다 "! " appendTo : "몸"// 마지막으로 추가하려면 어떤 선택 }); // << 더 우리가 내부적으로 속성을 정의 여기에 아무것도 할 필요가 없습니다. <스크립트 SRC = "// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    당신이 거기에 갈 수 있도록 이안의 대답은 비슷하지만, 내가 제대로 속성 내에서 방법의 사용을 해결한다는 예를 찾을 수 없습니다가 선언 객체.

  13. 13.당신이 어떤 HTML 태그를 만들려면 단순히 경우이 작업을 시도 할 수 있습니다 예를 들면

    당신이 어떤 HTML 태그를 만들려면 단순히 경우이 작업을 시도 할 수 있습니다 예를 들면

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

    당신이 혹평에 모든 요소를 ​​추가 할 경우이 작업을 시도 할 수 있습니다

    selectBody.append(div);

  14. 14.

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

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

  15. 15.당신이 JQuery와> 1.4을 사용하는 경우, 당신은 이안의 대답에의 최고입니다. 그렇지 않으면,이 방법을 사용합니다 :

    당신이 JQuery와> 1.4을 사용하는 경우, 당신은 이안의 대답에의 최고입니다. 그렇지 않으면,이 방법을 사용합니다 :

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

    나는 또한 당신은 지금 즉시 뭔가 몸에 추가 할 것이라는 것을 때문에 콜백 기능이 추가 인 ()를 사용하여,이 경우 더 읽을 생각합니다. 코드 또는 텍스트를 작성할 때 그러나 그것은 언제나처럼, 취향의 문제이다.

    적은 HTML JQuery와 코드에서 가능한 한,이 주로 스파게티 코드이기 때문에 같은 일반적으로 사용합니다. HTML 문자열을 쉽게 오타를 포함 할 수 있기 때문에, 오류가 발생하기 쉬운 및 유지 보수가 어렵다. 또한, 일반적으로 나쁜 생각 프로그래밍 언어 (자바 스크립트 / JQuery와)과 마크 업 언어 (HTML)를 혼합합니다.

  16. 16.대안 적으로 추가하는 () 당신은 또한 다른 구문이 appendTo ()를 사용할 수 있습니다 :

    대안 적으로 추가하는 () 당신은 또한 다른 구문이 appendTo ()를 사용할 수 있습니다 :

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

  17. 17.당신은 .jquery () 메소드를 사용하여 별도의 태그를 만들 수 있습니다. 그리고으로 .Append () 메서드를 사용하여 자식 태그를 만들 수 있습니다. jQuery를 지원하는이 체인으로, 당신은 두 가지 방법으로 CSS를 적용 할 수 있습니다. 하나) (클래스에서이를 지정하거나 .attr 전화 :

    당신은 .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 데이터를 삽입하고있다. 다음으로, 나는 몇 가지 속성을 제공리스트의 아이 태그를 생성하고있다. 내가 그것을 추가하는 것이 쉬울 것이다 그래서 나는 변수에 값을 할당했다.

  18. 18.나는이 사업부를 추가하는 가장 좋은 방법이라고 생각 :

    나는이 사업부를 추가하는 가장 좋은 방법이라고 생각 :

    ID의 div_id를 가진 div 요소에 대한 테스트 사업부를 추가하려면 :

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

    이제 APPEND HTML이 추가 테스트 DIV에 :

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

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

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

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

  20. 20.그냥 빈 사업부의 경우,이 충분합니다 :

    그냥 빈 사업부의 경우,이 충분합니다 :

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

    또는

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

    이 같은 결과를 제공합니다.

  21. 21.$ (는 HTMLElement) 캔 성공 그것. 당신이 epmty를 원한다면 사업부는 $로 사용 ( '
    '); 또한 같은 방법으로 다른 요소를 설정할 수 있습니다. 만든 후 내부 HTML을 변경하려는 경우 당신은 HTML () 메소드를 사용할 수 있습니다. GET outerHTML에 사용할 수있는 문자열이 같다 :

    $ (는 HTMLElement) 캔 성공 그것. 당신이 epmty를 원한다면 사업부는 $로 사용 ( '

    '); 또한 같은 방법으로 다른 요소를 설정할 수 있습니다. 만든 후 내부 HTML을 변경하려는 경우 당신은 HTML () 메소드를 사용할 수 있습니다. GET 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;

  22. 22.새의 jQuery 객체를 만들고 대상 요소에 추가) (.add 사용할 수 있습니다. 더 진행 한 후 체인을 사용합니다.

    새의 jQuery 객체를 만들고 대상 요소에 추가) (.add 사용할 수 있습니다. 더 진행 한 후 체인을 사용합니다.

    예 : jQueryApi :

    $ ( "DIV")에 .css ( "경계", "2 픽셀 빨간색으로") .add ( "P") .CSS ( "배경", "노란색"); DIV { 폭 : 60 픽셀; 높이 : 60 픽셀; 여백 : 10px; 왼쪽으로 뜨다; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

  23. 23.이것은 어떤가요? 여기서, pElement는 (의 자식이어야합니다! :) 내부에이 사업부를 할 요소를 의미합니다.

    이것은 어떤가요? 여기서, pElement는 (의 자식이어야합니다! :) 내부에이 사업부를 할 요소를 의미합니다.

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

    쉽게 문자열에 해당 사업부에 더 많은 것을 추가 할 수 있습니다 - 속성, 콘텐츠, 당신은 그것을 이름을 지정합니다. 속성 값, 오른쪽 인용 부호를 사용해야 노트를 수행합니다.

  24. 24.난 그냥 그것을 위해 플러그인 작은 jQuery를했습니다.

    난 그냥 그것을 위해 플러그인 작은 jQuery를했습니다.

    그것은 당신의 구문을 다음과 같습니다 :

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

    DOM 노드 ID는 두번째 파라미터로 지정 될 수있다 :

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

    심각해? 번호 그러나이 구문은 $보다 낫다 ( "

    "), 그리고 그 돈을 위해 아주 좋은 값입니다.

    (부분적으로 답변에서 복사 : jQuery를 document.createElement에 해당)

    25. from https://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 페이지에서 파일을 삭제하면 어떻게 파일의 입력 값을 설정하는 방법? [복제]  (0) 2020.09.26
[JQUERY] 브라우저 / 탭이 활성화되어 있는지 확인하는 방법 [중복]  (0) 2020.09.26
[JQUERY] jQuery를 함께 현재의 URL을 얻을?  (0) 2020.09.26
[JQUERY] AJAX MVC를 통해 Excel 파일을 다운로드  (0) 2020.09.26
[JQUERY] 왜 jQuery의 아약스는 내 세션 쿠키를 전송하지 () 메소드입니까?  (0) 2020.09.26
,

티스토리툴바