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()的差别