(jQuery를)

Question

I가 I가 '수정 설정'버튼을 추가하려면 다음 목록 항목 : 나는에 범위를 추가 할 jQuery를 사용

<li class="draggableBucketItem ui-state-default" id="bucketItem75" bucketID="2" pageModuleID="75"><span class="spnName">HTML Content</span><li> 

목록 항목 :

목록 항목은 정적으로 배치되며 페이지를 출력하고 목록 항목에 범위를 수동으로 포함하면 올바르게 배치됩니다. 하지만 jQuery를 추가하면 목록 항목 외부의 페이지 오른쪽 상단에 표시됩니다.

것은 내가 분명히 여기서 뭔가를 누락, 그래서 사람이 아이디어가있는 경우, 그 많이 주시면 감사하겠습니다.

는

크리스 햄튼에게,

웹 코디네이터

콜로라도 주립 대학을 주셔서 감사합니다

편집 : 나는이 그것을 할 것이다 (그리고 여전히 수도) 생각

하지만, 나는 아직도 문제가있다. 나는 '내부 HTML을 결합하여'길을 가서, 내가 콘솔에 목록 항목의 HTML을 작성할 때, 그것은 올바른 보이는 (이 때 내 서버 코드에서 페이지가로드를 출력 것과 일치) :

<span class="spnName">HTML Content</span><span class="spnEditModule">Edit Settings</span> 

는 여기 해당 항목의 CSS

.draggableBucketItem span.spnEditModule{position: absolute; top: 3px; right: 3px; font-weight: bold; color: #fff;} 

.draggableBucketItem 클래스의 위치는 static입니다. 그것에 적용됩니다.

Answer 1

Append()는 목록 항목 요소 다음에 새로운 범위를 배치합니다. 목록 항목의 html을 가져 와서 두 항목을 결합하거나 목록 항목 내에 이미 존재하는 범위에 추가하려고합니다.

목록 항목의 자식에 덧붙이는 작업을해야 : HTML 구조가 정확하지만 렌더링이 잘못

$('#bucketItem75').children().append('<span class="spnEditModule">Edit Settings</span>'); 

jsbin example