Изменить положение элемента только с помощью CSS/JS

Question

Я использую Uikit 2 ( https://getuikit.com/v2) - и мне нужно решить проблему.

Я получил эту разметку: https://codepen.io/anon/pen/jZwNeB

Теперь мне нужно сделать следующее. Эта часть:

<div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;"> ...</div>

Должен быть показан слева - справа под датой timetime. Но - и это важно: я не могу изменить сам источник. Я могу только добавить класс toc uk-panel uk-panel-box-primary sticky-toc и добавьте пользовательский CSS и пользовательский JS. Есть идеи, как это решить?

Answer 1

var obj = document.getElementById("node");
var parent = document.getElementById("parent");
parent.appendChild(obj);

Здесь, узел - это элемент "toc uk-panel uk-panel-box-primary sticky-toc". parent - это элемент "uk-width-large-1-4"

Очевидно, вы можете использовать любой другой метод DOM, чем тот, который я использовал. Таким образом, если вы хотите выбрать DOM объекта, используя класс имени класса, вы должны использовать getElementsByClassName("большое длинное имя класса")[0], чтобы правильно ссылаться на этот объект

Я просто хотел выделить метод appendChild

Answer 2

Я считаю, что лучший ответ - это использование CSS, но я не знаю о getukit и не знаю, как решить эту проблему только с помощью CSS.

Здесь вы можете попробовать с JQuery. Скажите мне, если вы хотите сделать это, используя чистый JS.

<link href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css' rel='stylesheet'>

<div class="uk-grid">
 <div class="uk-width-large-1-4">
  <p class="uk-article-meta tm-article-date uk-margin-small selectionShareable">
   <time datetime="2018-02-12T12:00:58+00:00">12.02.18</time>
  </p>
 </div>
 <div class="uk-width-large-3-4">
  <h1 class="uk-article-title">Test Content</h1>
  <div class="uk-margin">
   <div class="uk-sticky-placeholder" style="height: 52px; margin: 0px;">
    <div class="toc uk-panel uk-panel-box-primary sticky-toc" style="margin: 0px;">
     <ol class="toc-list ">
      <li class="toc-list-item">
       <a href="#" class="toc-link node-name--H1  is-active-link">Testa</a>
       <ol class="toc-list  is-collapsible">
        <li class="toc-list-item"><a href="#test" class="toc-link node-name--H2 ">Test 2</a></li>
       </ol>
      </li>
     </ol>
    </div>
   </div>
   <p class="selectionShareable">Test Content.</p>
  </div>
 </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
 function recreate(){
  let newElem = $('.sticky-toc').clone();
  $('.sticky-toc').remove();
  $('.tm-article-date').after(newElem);
 }
 recreate();
})
</script>