JQuery - .append() не двигается остальной код

Question

я эти DIV на моей странице HTML:

// CSS 
.trackon{width:710px; height:26px; color:#CCCCCC; font-weight:bold; float:left;} 
.trackoff{display:none;} 

// HTML 
<div class="trackon" id="trackline1">Line 1</div> 
<div class="trackon" id="trackline2">Line 2</div> 
<div class="trackon" id="trackline3">Line 3</div> 
<div class="trackoff" id="trackline4">Line 4</div> 
<div class="trackoff" id="trackline5">Line 5</div> 

с моей собственной функции addTrack (1) я хочу добавить (например) Line 5 между 1 и 2. поэтому я сделать эту функцию:

function addTrack(param) { 
    $("#trackline5").removeClass().addClass('trackon'); 
    $("#trackline"+param).append($("#trackline5").html()); 
} 

проблема, что эта Append не двигается другой Div вниз. Этот div (тот, у кого есть строка 5) будет отображаться наложенным в конце div с линией 1.

где я ошибаюсь? ура

Answer 1

Прежде всего, я думаю, что вы хотите after() или insertAfter() (который размещает элементы после друг друга), а не append() или appendTo() (который мест элементы внутри один другой). Во-вторых, не надо беспокоиться о html(), просто используйте сам элемент:

function addTrack(param) { 
    $("#trackline5").removeClass().addClass('trackon') 
     .insertAfter("#trackline"+param); 
} 

Answer 2

.html() возвращает внутреннее содержимое своего выбора, а не сам тег. Таким образом, вы не получаете весь ваш добавленный div, а только текстовое содержимое.

Answer 3

Поскольку вы хотите переместить контейнеры и не использовать контент # trackline5 и добавить его в # trackline1, вам понадобится другой подход - добавив $("#trackline5").html(), вы просто добавляете его содержимое, а не контейнер. Вы бы хотели сделать что-то похожее на следующее:

function addTrack(param) { 
    // Get the original element 
    var $trackline5 = $('#trackline5'); 
    // We need a copy 
    var $el = $trackline5.clone(); 
    // Remove the original from the DOM 
    $trackline5.remove(); 
    // Insert the new element after the specified one 
    $('#trackline' + param).after($trackline5); 
} 

HTH.

Answer 4

Я бы сделать это таким образом, который просто перемещает линию 5.

function addTrack(param) { 
    $("#trackline5").removeClass('trackoff').addClass('trackon').after($("#trackline" + param)); 
}