如何在页面上选择文本块，然后将元素移动到其前面

How can I select a block of text on a page, then move an element in front of it?

本文关键字：元素 然后 移动 前面 文本 选择      更新时间：2023-09-26

我有一个div，它将出现在页面上的单独点。它并不总是显示在页面上，如果需要，可以通过 CMS 添加。正文中将显示一行文本。如果用户决定添加此div，则需要通过 jquery 将其移动到位。所以，我有这段文字：

<p><strong>Key Facts:</strong></p>

我想使用 jquery 找到它，然后将另一个div 移到它前面。我尝试了几种不同的方法来选择此文本，然后将div 移动到它前面，但没有任何运气。我发现找到文本的最好方法是这样做： 

var foundin = $('*:contains("<p><strong>Key Facts:</strong></p>")');

从那时起，要将div 移动到位，我想我可以这样做：

$('#DivIWantToMove').insertBefore($foundin);

不过，这并没有奏效。我也看了这个：

$( $foundin ).before( $('#DivIWantToMove') );

正如您可能想象的那样，既然您正在阅读本文，那也不起作用。所以，我问你，有可能做我想做的事吗？我受到我们使用的CMS的相当限制。我需要移动的 DIV 将始终位于页面上的某个位置，我必须移动它。客户端不想向<p><strong>Key Facts:</strong></p>添加一个类，所以我可以这样做。如果我能上<p>课，那就太容易了。我已经做到了。客户不喜欢有额外的步骤。有什么想法吗？

我认为contains选择器只查找文本，而不是html标签。 所以你必须修改你的包含选择器。 如果你的 HTML 是这样的 -

<div>
    <p><strong>Key Facts:</strong>
    </p>
</div>
<div id="move">something something</div>

你想把你的<div id='move'>移到p面前，然后试试这个——

var foundin = $('p:contains("Key Facts")');
var divtomove = $('div#move');
foundin.before(divtomove);

演示

更新另请查看此 QA：jQuery ：包含与 html。您可以使用那里的方法之一，而不是使用contains。

相关文章：