복붙노트

[JQUERY] jQuery를 document.createElement 동등한?

JQUERY

jQuery를 document.createElement 동등한?

해결법

  1. 1.여기에 "한"라인에서 예입니다.

    여기에 "한"라인에서 예입니다.

    this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

    업데이트 : 나는 여전히 트래픽의 조금을 확실히 얻을 수 있기 때문에 내가이 게시물을 업데이트 할 거라고 생각했다. 이 아래 코멘트에 $ ( "

    ") 대 $ (document.createElement ( 'DIV')) 새로운 요소를 생성하는 방법, 등 및 대 $에 대한 논의는 ( "
    ")입니다 이는 "최고"입니다.

    나는 위의 옵션을 10 회 반복의 대략 결과 여기에 함께 작은 벤치 마크를 넣어 :

    jQuery를 1.4, 1.5, 1.6

                   Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

    jQuery를 1.3

                    Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

    jQuery를 1.2

                    Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

    나는 그것이 더 큰 놀라움 없다 생각하지만, document.createElement 가장 빠른 방법입니다. 물론, 전에 당신은 꺼지고 전체 코드베이스를 리팩토링 시작, 우리는 여기에 대해 이야기하고 차이 (모두하지만, jQuery를의 오래된 버전) 천 개 요소 당 추가 3 밀리 초에 대한 동일시 기억 해요.

    업데이트 2

    jQuery를 1.7.2에 대한 업데이트 및 아마 좀 더 과학적 내 원시적 인 벤치 마크보다 JSBen.ch에 대한 벤치 마크를 넣어, 플러스 그것은 이제 크라우드 소싱 할 수 있습니다!

    http://jsben.ch/#/ARUtz

  2. 2.간단하게 jQuery의 APPEND () 메소드를 사용하여 DOM에 추가되고 적합한, 새로 지어진 HTML에서의 jQuery 객체를 반환합니다) 당신이 jQuery를 생성자 $ (에 추가 할 요소의 HTML을 공급.

    간단하게 jQuery의 APPEND () 메소드를 사용하여 DOM에 추가되고 적합한, 새로 지어진 HTML에서의 jQuery 객체를 반환합니다) 당신이 jQuery를 생성자 $ (에 추가 할 요소의 HTML을 공급.

    예를 들면 :

    var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

    당신이 원한다면 그런 다음, 프로그램이 테이블을 채울 수 있습니다.

    이것은 당신에게 당신의 createElement를 사용하여 다음 JS를 통해 cellSpacing 및 클래스 이름과 같은 속성을 설정보다 더 간결을 찾을 수있는 클래스 이름이나 다른 속성을 포함하여 당신이 좋아하는 임의의 HTML을 지정할 수있는 기능을 제공합니다.

  3. 3.JQuery와 () 메소드의 핵심 기능은 새로운 DOM 요소입니다 만들기, 참조 :

    JQuery와 () 메소드의 핵심 기능은 새로운 DOM 요소입니다 만들기, 참조 :

  4. 4.나는 그렇게하고 있어요 :

    나는 그렇게하고 있어요 :

    $('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

  5. 5.jQuery1.8 이후, $ .parseHTML은 () 요소를 만드는 데 사용하는 것이 더 나은 선택이다.

    jQuery1.8 이후, $ .parseHTML은 () 요소를 만드는 데 사용하는 것이 더 나은 선택이다.

    두 가지 장점이 있습니다 :

    당신이 $ (문자열) 같은 것을 할 수있다 옛날 방식을 사용 설치 1., jQuery를 확실히 당신이 HTML 태그를 선택하거나 새 요소를 생성 할 수 있도록 문자열을 검사합니다. 명시 적으로 새로운 요소를 생성하도록 성능이 조금 더 나을 수 있도록 $ .parseHTML ()를 사용하면, jQuery를 말한다.

    2.much 더 중요한 것은 당신이 옛날 방식을 사용하는 경우는 크로스 사이트 공격 (추가 정보)에서 고통을 수 있다는 것이다. 당신은 같은이있는 경우 :

        var userInput = window.prompt("please enter selector");
    $(userInput).hide();

    나쁜 사람 캔 입력 <스크립트 SRC = "XSS-attach.js"> 를 애타게합니다. 다행히, $ .parseHTML ()는 당신이 당황하지 않도록 :

    var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

    B는 HTML 요소있는 동안은 jQuery를 객체라고하지만, 통지를하시기 바랍니다 :

    a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

  6. 6.최신 정보

    최신 정보

    jQuery를 최신 버전으로, 다음과 같은 방법은 두 번째 객체에 전달되지 할당 특성을 수행

    이전 대답

    나는 JQuery와 빠른 함께 document.createElement ( 'DIV')를 사용하는 느낌 :

    $(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

  7. 7.이것은 아주 오래된 질문이지만, 나는 최신 정보로 업데이트하는 것이 좋을 것이라고 생각;

    이것은 아주 오래된 질문이지만, 나는 최신 정보로 업데이트하는 것이 좋을 것이라고 생각;

    jQuery를 1.8 이후 현재 요소를 생성하는 바람직한 방법 인 jQuery.parseHTML () 함수가있다. 또한, $를 통해 구문 분석 HTML 몇 가지 문제가 예를 공식 jQuery를 웹 사이트가 자신의 릴리스 노트 중 하나에 다음 언급 된 fo ( '(html 코드)이 여기에 간다')이다 :

    실제 문제와 관련하려면 제공된 예로 번역 될 수있다 :

    this.$OuterDiv = $($.parseHTML('<div></div>'))
    .hide()
    .append($($.parseHTML('<table></table>'))
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

    이는 단지 $ ()를 사용하는 것보다 불행하게도 덜 편리하지만, 예를 들어 당신이 (가 온 클릭하지만 같은 인라인 스크립트를 떠나) 스크립트 태그를 제외하도록 선택할 수 있습니다, 당신에게 더 많은 제어 할 수 있습니다 :

    > $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

    또한, 여기에 새로운 현실로 조정 상단 응답에서 벤치 마크는 다음과 같습니다

    JSbin 링크

    jQuery를 1.9.1

      $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

    parseHTML가 더 가까이의 createElement에 $ ()보다 있지만, 모든 부스트는 새로운 jQuery를 객체에 결과를 포장 한 후 사라 것 같습니다

  8. 8.

    var mydiv = $('<div />') // also works

  9. 9.

    var div = $('<div/>');
div.append('Hello World!');

    jQuery를에 DIV 요소를 만들 수있는 가장 짧은 / 가장 쉬운 방법입니다.

  10. 10.난 그냥 그위한 작은 jQuery 플러그인을 만들었다 : https://github.com/ern0/jquery.create

    난 그냥 그위한 작은 jQuery 플러그인을 만들었다 : https://github.com/ern0/jquery.create

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

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

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

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

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

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

    나는 유사한 기능을 가지고 DOMAssistant에서 전환, 새로운 jQuery를 사용자입니다 : http://www.domassistant.com/documentation/DOMAssistantContent-module.php

    내 플러그인은 간단하다, 나는 바인드합니다 및 콘텐츠 메소드 체인으로 추가하는 것이 좋습니다 생각 :

    $("#container").append( $.create("div").addClass("box").html("Hello, world!") );

    또한, 간단한 jQuery를 - 플러그인 (100 일)에 대한 좋은 예이다.

  11. 11.그것은 꽤 똑바로 앞으로 모든입니다! Heres는 몇 빠른 예 ...

    그것은 꽤 똑바로 앞으로 모든입니다! Heres는 몇 빠른 예 ...

    var $example = $( XMLDocRoot );

    var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

    var $example.find('parent > child').append( $element );

  12. 12.이전 답변에서 언급하지 내가 최근에 요소 요소를 만드는 방법 작업 예제를 추가 해요 그래서 jQuery를, 또한 컨텐츠, 클래스, 또는 onclick을 콜백과 같은 추가 속성 :

    이전 답변에서 언급하지 내가 최근에 요소 요소를 만드는 방법 작업 예제를 추가 해요 그래서 jQuery를, 또한 컨텐츠, 클래스, 또는 onclick을 콜백과 같은 추가 속성 :

    const를 마운트 지점 = 'https://jsonplaceholder.typicode.com/users' CONST $ 버튼 = $ ( '버튼') CONST $ TBODY = $ ( 'TBODY') CONST loadAndRender = () => { $ .getJSON (마운트 포인트) 그 때는 (데이터 => { $ .each (데이터 (인덱스, {ID, 사용자 이름, 이름, 이메일}) => { 수 있도록 행 = $ ( '') 으로 .Append ($ ( ''{텍스트 : ID})) 으로 .Append ($ ( '', { 텍스트 : 사용자 이름, 클래스 : '클릭 날' 의 위에: { 클릭 : _ => { CONSOLE.LOG (이름) } } })) 으로 .Append ($ ( ''{텍스트 : 이메일})) $ tbody.append (행) }) }) } $ button.on ( '클릭', loadAndRender) .클릭 해주세요 { 배경 색상 : lightgrey } <표 스타일 = "너비 : 100 %"> <제> ID <제> 자명 <일> 이메일 <버튼>로드 및 렌더링 <스크립트 SRC = "https://code.jquery.com/jquery-3.3.1.min.js">

  13. 13.예를 들어이 무엇에 대해, 당신은 내부에 <옵션> 요소를 추가 할 <선택>

    예를 들어이 무엇에 대해, 당신은 내부에 <옵션> 요소를 추가 할 <선택>

    $('<option/>')
  .val(optionVal)
  .text('some option')
  .appendTo('#mySelect')

    당신은 분명히 모든 요소에 적용 할 수있는

    $('<div/>')
  .css('border-color', red)
  .text('some text')
  .appendTo('#parentDiv')

  14. 14.상자 밖으로 jQuery를은 createElement와 동등한이 없습니다. 사실 jQuery의 작품의 대부분은 내부적으로 순수 DOM 조작을 통해 innerHTML을 사용하여 수행됩니다. 아담이 위에서 언급 한 바와 같이 비슷한 결과를 얻을 수있는 방법이다.

    상자 밖으로 jQuery를은 createElement와 동등한이 없습니다. 사실 jQuery의 작품의 대부분은 내부적으로 순수 DOM 조작을 통해 innerHTML을 사용하여 수행됩니다. 아담이 위에서 언급 한 바와 같이 비슷한 결과를 얻을 수있는 방법이다.

    또한 appendDOM, DOMEC 및 FlyDOM 같은 innerHTML을 통해 DOM의 메이크업의 사용은 단지 몇 이름을 지정하는 것이 가능한 플러그인이 있습니다. 성능 현명한 네이티브 JQuery와 여전히 가장 성능이 좋은 것입니다 (이 innerHTML을 사용 주로를 변경할 수 없기)

    15. from https://stackoverflow.com/questions/268490/jquery-document-createelement-equivalent by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 자동으로 페이지 하단으로 스크롤  (0) 2020.09.29
[JQUERY] 나는 Node.js를 함께 jQuery를 사용할 수 있습니까?  (0) 2020.09.29
[JQUERY] 있는 jqGrid 서버 측 오류 메시지 / 검증 처리  (0) 2020.09.29
[JQUERY] 왜 아약스 스크립트는 IIS 7.5 윈 2008 R2 서버에서 실행되지 않는 이유는 무엇입니까?  (0) 2020.09.28
[JQUERY] 당신은 아이 패드에 HTML5 비디오를 자동으로 재생 할 수 있나요?  (0) 2020.09.28
,

티스토리툴바