在Google搜索结果中交换网站标题和链接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+函数长的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