jQuery .append перемещает только внутренние элементы целевого div

Я пытаюсь переместить, а не скопировать элемент html div через jquery в другое место на странице.

В настоящее время я пытаюсь сделать это с помощью .append

$('#append-options').append($('#wsite-com-product-options').html());

Этот код, пока работает, дает мне нежелательные результаты. Первая проблема заключается в том, что он перемещает только дочерний контент внутри div #wsite-com-product-price-area, а не сам div. Во-вторых, это не просто перемещение элементов, а их копирование, в результате чего перемещенный элемент дважды появляется на странице.

Как может быть очевидно, я довольно зеленый с jquery. Я знаю, что есть другие способы перемещения элементов в jquery, но я не уверен, какой из них подходит. Вот полный скрипт, который я использую на своей странице, который также делает несколько других вещей.

<script type="text/javascript">
(function($) {
  $(function() {
    $('#append-options').append($('#wsite-com-product-options').html());
    $('#insert-after-here').prepend($('#wsite-com-product-price-sale').html());
    $('#insert-after-here').prepend($('#wsite-com-product-price-area').html());
    var $btn = $('#wsite-com-product-buy');
    $('.wsite-product-description').first().append('<div id="something-cool"/>');
    $btn.appendTo('#something-cool').css('top', 0);
  });
})(jQuery);
</script>

jquery append prepend
person Alex Ritter    schedule 18.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не вызывайте .html на нем:

$('#append-options').append($('#wsite-com-product-options'));
// No `.html()` here --------------------------------------^

Это приведет к перемещению самого элемента, включая его дочерние элементы. Это также позволяет избежать ненужного кругового пути «элементы в строку, а затем синтаксический анализ обратно к элементам», сохраняя данные и обработчики событий, которые могут быть прикреплены к элементам.

Пример:

$("input").on("click", function() {
  var target = $("#top").children().length ? "#bottom" : "#top";
  $(target).append($(".moveable"));
});
#top {
  width: 200px;
  height: 120px;
  border: 1px solid black;
  margin-right: 4px;
}
#bottom {
  width: 200px;
  height: 120px;
  border: 1px solid black;
}
.moveable {
  display: inline-block;
  width: 100px;
  border: 1px solid green;
}
<div>
  <div id="top"></div>
  <div id="bottom">
    <div class="moveable">
      I'm the one that moves.
      Note I have <strong>child elements</strong>
    </div>
  </div>
</div>
<input type="button" value="Click to move">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

person T.J. Crowder    schedule 18.04.2015
comment
Отлично, отлично сработало @T.J. Краудер. Просто любопытно, что на самом деле делает .html(), и должен ли я удалить его из других элементов скрипта? - person Alex Ritter; 18.04.2015
comment
@AlexRitter: .html() эффективно извлекает свойство innerHTML первого элемента в наборе jQuery, для которого вы его вызываете. При доступе к innerHTML браузеру предлагается просмотреть все узлы-потомки (дочерние узлы и их дочерние элементы и т. д.), создав строку HTML-разметки, представляющую их. Если вам не нужна разметка, вы обычно не хотите использовать .html(). Большую часть времени вы хотите работать с элементами (реальными объектами), а не с разметкой. Я не могу говорить об остальной части сценария, но вы, вероятно, не хотите этого там, нет. - person T.J. Crowder; 18.04.2015
comment
.html() очень похож на собственное свойство javascript innerHTML, оно просто нацелено на весь html внутри выбранного элемента. - person deowk; 18.04.2015