使用bookmarklet将html插入网页

Question

我想创建一个bookmarklet，在现有页面中的某个标记之后插入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"，或者您尝试添加的链接不是第一个。您可以将[0]中的数字更改为[1]以选择第二个，[2]替换第三个，等等。

使用jQuery，您还可以使用：

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

但是这会将新内容添加到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');

并且在这种情况下的书签将是：

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

如果您需要将其添加到.link＆gt;的第一次出现。 a，在insertAfter（'。links a'）之后添加.eq（0）

.eq（0）表示第一个元素，第二个是.eq（1）等。 您可以使用其中一个在线书签生成器轻松创建，这里有一个： Bookmarklet Crunchinator

Answer 3

使用jQuery非常简单......

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

它只是将一些html附加到具有类links的元素。