jQuery를 사용하여 HTML 생성

jQuery를 사용하여 HTML을 생성하려고하는데 필요한 클래스 등으로 요소를 만든 다음 이해가된다면 서로에 추가하려고합니다. 아래 코드를 작성했지만 오류가 발생하지 않으며 HTML을 컨테이너에 추가하지도 않습니다.jQuery를 사용하여 HTML 생성

무엇이 잘못 되었나요?

(function($) { 
    $.fn.twitter_plugin = function(options) { 

    var container = this[0]; 

    console.log('Started'); 
    // Make aJax call 

    // Generate HTML 
    $con = $("<div>", { "class" : "tweet" }); 
    $(container).append($con); 
     $col1 = $("<div>", { "class" : "twocol" }); 
     $con.append($col1); 
     $col2 = $("<div>", { "class" : "tencol last" }); 
     $con.append($col2); 

     // Profile Image 
     $tweet_profile_div = $("<div>", { "class" : "tweet-profile-photo" }); 
     $col1.append($tweet_profile_div); 
      $profile_img = $("img", { "src" : '', "class" : "responsive-img" }); 
      $tweet_profile_div.append($profile_img); 
     // END Profile Image 

     // Tweet 
     $tweet_head = $("div", { "class" : "tweet-head" }); 
     // END Tweet 

    }; 
}(jQuery));

과 같이이 실행 :

<script src="js-src/themev2/twitter_plugin.js"></script> 
<script> 
$(document).ready(function() { 
    $("#map_canvas").twitter_plugin({ }); 
}); 
</script>

편집 한

을 console.log가 표시 될 때 @Sean 라이머, 내 twitter_plugin 기능은 당신이 제안이 변경없이 실행되고 , 이것은 문제가되지 않습니다.

출처

2016-07-28 Martyn Ball

콘솔 로그를 가져 왔습니까? – Adjit

jQuery를 포함 시켰습니까? – gaetanoM

문제는 jquery에 대한 IIFE를 가지고 있지만 '$ .fn.twitter_ 플러그인 함수 '가 정의되었지만 호출되지 않았습니다. 함수 정의의 끝에는()을 추가하여 호출해야합니다.

그렇게

 $tweet_head = $("div", { "class" : "tweet-head" }); 
     // END Tweet 
    };

이 [0] 완전히 신뢰할 수있는 경우

 $tweet_head = $("div", { "class" : "tweet-head" }); 
     // END Tweet 

    }();

나는 또한 당신의 컨테이너 요소로 몸을 저장할 더 좋을 수도 모르겠습니다해야합니다. 이것은 창 개체 일 뿐이므로 0 인덱스 요소가 없습니다.

var container = $('body') 이 문제를 해결할 것입니다.

출처

2016-07-28 17:58:32

'this [0]'은 여기에 정의 된 요소를 가져옵니다. $ ("map_canvas"). twitter_plugin ({});'새로운 요소를 몸 안쪽에 넣어야합니다. 그리고 내 질문에 대한 답변 주셔서 감사합니다 :) –

편집을 참조하십시오, 누락 된() 문제가 해결되지 않습니다. –

어리석은 실수는 코드가 잘 작동하고 대상 요소의 ID를 잘못 입력했기 때문에 가능합니다.

출처

2016-07-29 08:46:58

jQuery를 사용하여 HTML 생성

답변

관련 문제