仅使用CSS / JS更改元素的位置

Question

I am using Uikit 2 ( https://getuikit.com/v2 ) - and I need to solve a problem.

I got this markup: https://codepen.io/anon/pen/jZwNeB

Now I need to do the following. This part:

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

Should be shown on the left side - right under the time datetime part. But - and this is important: I can not change the source itself. I can only add a class to toc uk-panel uk-panel-box-primary sticky-toc and add custom CSS and custom JS. Any idea how to solve this?

Answer 1

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

Here, node is the "toc uk-panel uk-panel-box-primary sticky-toc" element. parent is the "uk-width-large-1-4" element

You can obviously use any other DOM method than the one I have used. So, if you want to select the DOM of the entity using its class name class, you have to use getElementsByClassName("big long class name")[0] to correctly reference that entity

I just wanted to highlight the appendChild method

Answer 2

I believe the best answer is using CSS, but because I don't know about getukit and I don't know how to solve this using CSS only.

Here you can try with jQuery. Tell me if you want do this using pure 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>