포장하는 방법 JQuery와 HTML 개체 변수

Question

나는 일부 사용자 지정 스타일을 다른 사업부에서 개체를 래핑 할 필요에 내가

var loading = $('<div class="loading" style="display:none">loading...</div'); 

나중에 HTML 개체 변수에 문제가 있어요

var animateWrapper = $('<div style="width:' + elwidth + '; position:absolute; top:'+elPos.top+'; left:' + elPos.left + '">' + loading.html() + '</div>'); 

선명하게 촬상 animaterWrapper을 선언 한 다음 loading을 추가했는지 또는 로딩해야하는 래퍼 div를 사용하여 loading.wrap()을 래핑 해보십시오.

어떻게해야합니까?

Answer 1

사용의 jQuery 추가합니다

var div = jQuery("<div></div>",{class:"my_class", text: "my div"}); 
 
var container = jQuery("<div></div>",{id: "conainer", text:"container my div"}); 
 
container.append(div); 
 
jQuery("body").append(container);

#conainer { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
#conainer > .my_class { 
 
    border: 5px solid red; 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

당신이 HTML 문자열을 사용하여 JS 객체를 생성 할 수 있습니다.

래퍼 html을 사용하여 새 래퍼 js 개체를 만든 다음이 텍스트에로드 텍스트를 추가하십시오.

//your wrapper div 
var animateWrapper = '<div style="width:'+elwidth+'; position:absolute; top:'+elPos.top+'; left:'+elPos.left+'"></div>'; 

//your loading html 
var loadingHtml = '<div class="loading" style="display:none">loading...</div>'; 

//wrapper div js object 
var $animateWrapper = jQuery.parseHTML(animateWrapper); 

//now you can append your loading text to this $animateWrapper 
$animateWrapper.append(loadingHtml); 

전체 래퍼 div의 HTML을 $ animateWrapper.html(); 그 안에 당신의 로딩 HTML이있을 것입니다.

은 (닫는 </div'에 > 누락)

Answer 3

귀하의 초기 HTML이 유효하지 않습니다 ..이 작동하는지 알려주세요.

는 대신 깔끔한 jQuery를 객체 속성 방법 (경향 덜 오류)를 사용하여 요소를 구성 :

var loading = $('<div>', { class: "loading", style: "display:none" }).html("loading..."); 
var animateWrapper = $('<div>', {style: "width:" + elwidth + "; position:absolute; top:"+elPos.top+"; left:" + elPos.left}); 

다른 요소를 사용 APPEND 내부를 추가합니다. 당신은 기존 개체 주위에 래퍼를 추가하려면 랩 또는 wrapAll

를 사용 예 "포장"http://jsfiddle.net/TrueBlueAussie/y4460cwj/3/

참고 : 나는 당신이 결과가 올바른지 볼 수 있도록 스타일을 추가하기 위해 추가 래퍼 클래스를 추가 DOM 검사없이.