在 Google 搜索结果中交换网站标题和 Link URL

Question

这是 Google 搜索结果页面源代码的一部分。我想将 div 元素移动到 href 容器中。在这种情况下，我想交换第一个 div.TbwUpd 和最后一个 h3.LC20lb。所以，我想要这个：

<div class="g">
    <div data-hveid="CAMQAA" data-ved="2ahUKEwiy1bOI8IPlAhWVMN4KHfE2DXcQFSgAMAt6BAgDEAA">
        <div class "rc">
            <div class "r"> 
                <a href="https://www.merriam-webster.com/dictionary/meh" onmousedown="return>
                    <div class="TbwUpd">
                        <img class="xA33Gc" alt="https://www.merriam-webster.com/" height="16" src="data:image/png;base64,I=" width="16" data-atf="3"><cite class="iUh30 bc rpCHfe">Merriam-Webster › dictionary › meh</cite></div>
                    <br>
                    <h3 class="LC20lb">
                        <div class="ellip">Meh | Definition of Meh by Merriam-Webster</div></h3>
                </a>
            </div>
        </div>
    </div>
</div>

变成这样：

<div class="g">
    <div data-hveid="CAMQAA" data-ved="2ahUKEwiy1bOI8IPlAhWVMN4KHfE2DXcQFSgAMAt6BAgDEAA">
        <div class "rc">
            <div class "r"> 
                <a href="https://www.merriam-webster.com/dictionary/meh" onmousedown="return>
                    <h3 class="LC20lb">
                        <div class="ellip">Meh | Definition of Meh by Merriam-Webster</div></h3>
                    <br>
                    <div class="TbwUpd">
                        <img class="xA33Gc" alt="https://www.merriam-webster.com/" height="16" src="data:image/png;base64,I=" width="16" data-atf="3"><cite class="iUh30 bc rpCHfe">Merriam-Webster › dictionary › meh</cite></div>
                </a>
            </div>
        </div>
    </div>
</div>

我尝试在这个用户脚本中这样做，但没有成功。

// ==UserScript==
// @name        Rearrange Goggle Search result :Swap Title and URL
// @include     https://www.google.com/search*
// @version     1
// @grant       none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==

$('.TbwUpd').appendTo('.LC20lb');

Answer 1

1- Google 结果是动态创建的，因此如果是这种情况，则需要大量其他代码来查找动态变化
2- 不需要为一个小代码添加 700+ 函数 long JQuery。它会比纯 JavaScript 更有效。（注意：JQuery 1 和 2 已弃用，因为它们存在问题，应避免使用）
3- 我猜要查找和更改的项目不止一项，因此 fowling 代码会找到所有项目

// ==UserScript==
// @name        Rearrange Google Search result :Swap Title and URL
// @include     https://www.google.com/search*
// @version     1
// @grant       none
// ==/UserScript==

document.querySelectorAll('a div.TbwUpd').forEach(item => {
  item.parentNode.appendChild(item.nextElementSibling); // put the <br> at the end
  item.parentNode.appendChild(item);                    // put the <div> at the end
});

4- 如果只有一项那么

// ==UserScript==
// @name        Rearrange Google Search result :Swap Title and URL
// @include     https://www.google.com/search*
// @version     1
// @grant       none
// ==/UserScript==


const div = document.querySelector('a div.TbwUpd');
div.parentNode.appendChild(div.nextElementSibling); // put the <br> at the end
div.parentNode.appendChild(div);                    // put the div at the end

在 Google 搜索结果中交换网站标题和 Link URL

Swap Website Title and Link URL in Google Search Results

html

jquery

greasemonkey

userscripts

tampermonkey