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的用法

jQuery中的append()和prepend(),after()和before()的差别

通过 append() 和 prepend() 方法添加若干新元素

.append .prepend 问题