How to extract a table from a form and place it in another place?

Question

JavaScript

There is a form with a json object that contains a table with the description-table class and a span with the price class. Question: how to pull the table and the span out of the form, but keep the binding, and so that they are located above the form itself in the document structure?

<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo $post->ID; ?>" data-product_variations="<?php echo esc_attr( json_encode( $variable_products['available_variations'] ) ) ?>">
  <div class="single_variation">
    <span class="price"><span class="amount">260.000&nbsp;руб.</span></span>
  </div>
  <table class="description-table">
    <tbody>
      <tr>
        <td class="product-quantity">
          <div class="quantity buttons_added">
            <input type="number" step="1" min="1" max="27" id="num_count" name="quantity" value="1" title="Кол." class="input-text qty text" size="4">
            <span>порц.</span>
            <input type="button" value="+1" id="button_plus" class="plus">
            <input type="button" value="-1" id="button_minus" class="minus">
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <!--/ .description-table-->
<button type="submit" class="button add_to_cart_button product_type_simple single_add_to_cart_button"><?php echo $product->single_add_to_cart_text(); ?></button>
<input type="hidden" name="add-to-cart" value="<?php echo $product->id; ?>" />
    <input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
    <input type="hidden" name="variation_id" value="" />

</form>

Answer 1

If I understand everything correctly, then with jQuery you can do this:
Without jQuery something like this:

var form = document.getElementsByClassName('variations_form')[0],
    form_container = form.parentElement,
    table_copy = form.getElementsByClassName('description-table')[0].cloneNode(true),
    span_copy = form.getElementsByClassName('price')[0].cloneNode(true);

form_container.insertBefore(table_copy, form);
form_container.insertBefore(span_copy, form);

Answer 2

you can go the hard way and use jquery :

Допустим страница содержит следующий текст:

 <ul class="list l1">
   <li class="item i1"> Высоко </li>	
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item i1"> Выше </li>	
   <li class="item i2"> Быстрее </li>	
   <li class="item i3"> Сильнее </li>	
 </ul>

следующие два выражения будут равнозначны

 $(".i1").replaceWith("<li class='item'>Тест</li>");
 
 $("<li class='item'>Тест</li>").replaceAll($(".i1"));

в обоих случаях элемент списка с текстом "Тест" заменит элементы с классом i1. В результате, текст нашей страницы станет следующим:

 <ul class="list l1">
   <li class='item'>Тест</li>	
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class='item'>Тест</li>	
   <li class="item i2"> Быстрее </li>	
   <li class="item i3"> Сильнее </li>	
 </ul>


Помимо html-текста, можно заменять одни элементы страницы другими. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код

 $(".l2 i2").replaceWith($(".l1 i1"));

изменит первоначальную страницу следующим образом:

 <ul class="list l1">
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item i1"> Выше </li>	
   <li class="item i1"> Высоко </li>	
   <li class="item i3"> Сильнее </li>	
 </ul>


Рассмотрим пример с использованием пользовательской функции. Добавим драматичности элементам из второго списка:

 $(".l2 .item").replaceWith(function(){
     return ' <li class="item" > '+$(this).text()+', я кому сказал! </li>';
 });

в итоге, текст первоначальной страницы станет следующим:

 <ul class="list l1">
   <li class="item i1"> Высоко </li>	
   <li class="item i2"> Быстро </li>	
   <li class="item i3"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше, я кому сказал! </li>	
   <li class="item"> Быстрее, я кому сказал! </li>	
   <li class="item"> Сильнее, я кому сказал! </li>	
 </ul>