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

【问题标题】：Change position of an element using CSS/JS only仅使用 CSS/JS 更改元素的位置
【发布时间】：2018-03-10 07:00:13
【问题描述】：

我正在使用 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>

应该显示在左侧 - 时间日期时间部分的正下方。但是 - 这很重要：我不能改变源本身。我只能给toc uk-panel uk-panel-box-primary sticky-toc添加一个类并添加自定义CSS和自定义JS。知道如何解决这个问题吗？

【问题讨论】：

您的标记正在不断重新加载
什么意思？密码笔网站？它适用于我所有的浏览器...
仅toc uk-panel uk-panel-box-primary sticky-toc 或从uk-width-large-3-4 开始？
嗨。我只能编辑toc uk-panel uk-panel-box-primary sticky-toc 元素的类。我可以添加或删除类并将自定义 JS 或自定义 CSS 添加到页面。我无法编辑网格。
绝对定位元素可能是实现这一目标的最简单方法...

标签： javascript html css getuikit

【解决方案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 方法。因此，如果您想使用其类名 class 选择实体的 DOM，则必须使用 getElementsByClassName("big long class name")[0] 来正确引用该实体

我只是想强调 appendChild 方法

【讨论】：

嗨...这是可能的 - 但元素没有 ID。编辑：刚刚看到您的编辑。

【解决方案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>

【讨论】：