jQuery를 만들면이 HTML을 단순화 할 수 있습니까?

Question

약간의 말풍선을 만드는이 코드가 있습니다. 다가오는 웹 사이트에 몇 십여 개를 넣을 예정입니다.하지만 div를 만드는 코드는 거품을 추가하고 싶을 때마다 작성하고 싶은 내용이 너무 많습니다.

내가 원하는 것은 jQuery를 사용하여 .html() 속성을 사용하여 대부분의 코드를 생성하는 것입니다. 나는 jQuery를 배우기 때문에 이것에 대한 어떤 도움이라도 나를 배우기위한 훌륭한 원천이 될 것입니다. 나는이 모두를위한 스타일 시트를

<div id="bubbleWrapper"> 
    <div class="bubbleTop"></div> 
    <div class="bubbleText">ryan jay</div> 
</div> 

하지만 지금은 중요하지 : 여기

현재 HTML입니다. 것

<div class="bubble">ryan jay</div> 

을 그리고 jQuery를 : 나는 할 수 있도록하고 싶습니다 무엇

는

, 내가 페이지에 거품을 추가 할 때, 난 그냥이 같은 것을 사용할 수 있습니다입니다 첫 번째 코드 예제를 다시 만듭니다. 이게 가능한 것입니까? 나는 이것을 어떻게 할 것인지에 관해서는 조금 잃어버린다.

시간을내어 도와 주셔서 감사합니다.

Answer 1

이 시도 :

$(".bubble").each(function() { 
    $wrapper = $("<div></div>").addClass("bubbleWrapper"); 
    $top = $("<div></div>").addClass("bubbleTop"); 
    $(this).addClass("bubbleText").wrap($wrapper).before($top); 
}); 

주 내가 포장 divbubbleWrapper의 종류가 아닌 렌더링 것이다는 id을 반복하지 않고 페이지에 걸쳐이 여러 버전을 가질 수 있습니다이 같은 id했다 페이지가 유효하지 않습니다.

자바 스크립트를 사용하지 않는 사람이라면이 기능을 완전히 차단할 가치가 있습니다. DRY 원칙에 대한 더 나은 접근법은 문자열 (bubbleText div 내에서 사용됨)을 전달하고이 HTML을 생성하는 서버 측 코드에서 함수를 만드는 것입니다. 여러 객체에 동일한 ID를 가질 수 없기 때문에 내가 클래스 이름에 bubbleWrapper을 변경 :

function createBubble(text, insertPoint) { 
    var elem = document.createElement("div"); 
    elem.className = "bubbleWrapper"; 
    elem.innerHTML = '<div class="bubbleTop"></div><div class="bubbleText">' + text + '</div>'; 
    insertPoint.parentNode.insertBefore(elem, insertPoint.nextSibling); 
} 

참고 :

Answer 2

당신은 당신이 원하는 목적지까지 이러한 거품 개체 중 하나를 삽입하는 함수를 만들 수 있습니다.

Answer 3

많은 요소를 만들려면 기본 자바 스크립트를 사용하는 것이 좋습니다.

DOM 요소를 만들 때 jQuery와 기본 javascript 사이에는 엄청난 시간 차이가 있기 때문에. 어쩌면 네이티브 자바 스크립트 방식이 더 깔끔하지는 않지만 확실히 빠른 방법입니다.