使用書簽將HTML插入網頁

Question

我想創建一個書簽，在現有頁面中的某個標簽之后插入html標簽，在本例中為下面的div。 你會怎么做？

<div class="links">
  <a href="http://example.com">Link</a>

  <-- Insert here -->

</div>

Answer 1

您可以使用以下命令：

javascript:document.getElementsByClassName('links')[0].getElementsByTagName('a')[0].outerHTML+='<!-- Insert here -->';

這將簡單地用鏈接的HTML內容替換鏈接的HTML內容，並在其后添加要添加的部分。

該腳本將僅選擇頁面上class="links"的首次使用中的第一個class="links" 。 如果這不起作用，則該頁面上可能有更多帶有class="links"元素，或者您嘗試添加的鏈接不是第一個。 您可以將[0]的數字更改為[1]以選擇第二個，選擇[2]作為第三個，依此類推。

使用jQuery，您還可以使用：

javascript:$('.links a').after('<!-- Insert here -->');

但這會將新內容添加到每個帶有class="links"元素內的每個class="links" 。 如果您希望它與上述native-JS示例相同（僅選擇class="links"內的第一個鏈接），則可以使用以下命令：

javascript:$('.links:eq(0) a:eq(0)').after('<!-- Insert here-->');

Answer 2

如果頁面加載了jQuery，您可以嘗試以下操作：

javascript:jQuery('<-- Insert here -->').insertAfter('.links a');

在這種情況下，bookmarklet為：

javascript:(function(){jQuery('<--%20Insert%20here%20-->').insertAfter('.links%20a');})();

如果需要將其添加到.link> a的首次出現，請在insertAfter（'。links a'）。eq（0）之后添加

.eq（0）表示第一個元素，第二個元素是.eq（1）等。您可以使用一個在線bookmarklet生成器輕松創建該元素，這是一個： Bookmarklet Crunchinator

Answer 3

使用jQuery，這非常簡單...

javascript:$('.links').append("<a href='http://stackoverflow.com'>stack overflow</a>")

它只是通過類links將一些html附加到元素上。