prepend() 和 append() 之间有啥?
Posted
技术标签:
【中文标题】prepend() 和 append() 之间有啥?【英文标题】:What comes in between prepend() and append()?prepend() 和 append() 之间有什么? 【发布时间】:2021-06-13 07:46:16 【问题描述】:我会尽快的。我正在尝试定位一个元素 wrt 我的目标。通常我们有 prepend(在目标之前)和 append(在目标之后)。但是,是否有类似的方法可以帮助我们将该元素放在我们的目标上,而不是放在之前(前置)或之后(附加)?
【问题讨论】:
开启你的目标是什么?如果它包含子元素,您可以替换或定位该元素的innerhtml
,或将其附加/添加到该子元素。
假设有一个名为“X”的目标。我正在尝试在页面上放置一些元素“B”。我可以使用 prepend 并将 B 放在 X 之前,也可以使用 append 并将 B 放在 X 之后。如何将 B 放在 X 上?
如果你想在 X 上覆盖 B,那么你需要将它插入到 X 内部,并以 0 的插入绝对定位它。
是replaceWith吗?
DOM 只知道之前和之后,因为在 DOM 中的同一位置不能有多个元素。 CSS 知道绝对定位。但是您的问题并没有说明您要达到的目标。
【参考方案1】:
如果你想将新的 HTML 元素添加到目标...我不知道这是否是你想要的。
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x background:#bbb;padding:10px;
.target-b background:#fff;color:#222;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>
【讨论】:
【参考方案2】:您可以在:before
上使用position:absolute
将其放置在实际内容上。
HTML
<div class="example">This is an example div</div>
CSS
.example
background-color: #5BC8F7;
.example::before
position:absolute;
content: "Above!";
background-color: #FFBA10;
【讨论】:
以上是关于prepend() 和 append() 之间有啥?的主要内容,如果未能解决你的问题,请参考以下文章
jQuery中append(),prepend()与after(),before()的区别
jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别
jQuery中的append()和prepend(),after()和before()的差别