Add/append 个要添加此块的元素

Question

我正在使用看起来像这样的 AddThis 分享框：

<div class="at4-share-outer addthis-smartlayers addthis-smartlayers-desktop" aria-labelledby="at4-share-label" role="region">
 <div id="at4-share-label">AddThis Sharing</div>
 <div id="at4-share" class="addthis_32x32_style atss atss-left addthis-animated slideInLeft at4-show">
  <a class="at4-share-btn at-svc-facebook" href="#"><span class=" at4-icon aticon-facebook" title="Facebook">Facebook</span></a>
  <a class="at4-share-btn at-svc-twitter" href="#"><span class=" at4-icon aticon-twitter" title="Twitter">Twitter</span></a>
  <a class="at4-share-btn at-svc-linkedin" href="#"><span class=" at4-icon aticon-linkedin" title="LinkedIn">LinkedIn</span></a>
  <a class="at4-share-btn at-svc-pinterest_share" href="#"><span class=" at4-icon aticon-pinterest_share" title="Pinterest">Pinterest</span></a>
  <a class="at4-share-btn at-svc-google_plusone_share" href="#"><span class=" at4-icon aticon-google_plusone_share" title="Google+">Google+</span></a>
  <div id="at4-scc" class="at-share-close-control ats-gray at4-show at4-hide-content" title="Hide">
   <div class="at4-arrow at-left">Hide</div>
  </div>
 </div>
 <div id="at4-soc" class="at-share-open-control-left ats-gray at4-hide" title="Show">
  <div class="at4-arrow at-right">Show</div>
 </div>
</div>

我想在 GooglePlus 分享按钮之后添加一个 YouTube 关注按钮，代码如下：

<a style="background-color:#CC1F1F;" data-svc="youtube" data-svc-id="1" title="Follow on Youtube" href="http://www.youtube.com/channel/test?sub_confirmation=1" target="_blank"><span class="at4-icon at4-icon aticon-youtube"></span></a>

我试过 jQuery after() 和 insertAfter() 但没有成功。

$( ".at-svc-google_plusone_share" ).after( $( "<p>Test</p>" ) );
$( "<p>Test</p>" ).insertAfter( ".at-svc-google_plusone_share" );

$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
 $( "<p>Test</p>" ).appendTo( ".at4-share-btn" );
});

这可以做到吗？

Answer 1

尝试删除 jquery.after() 参数中的 $。

http://api.jquery.com/after/

您也可以在父对象上使用 .append() div

Answer 2

好的，终于找到解决方案了。我需要在触发函数之前添加一个 TimeOut。

scripts.js 文件：

(function($) {
 $( document ).ready(function() {
 setTimeout(function(){
  $( ".at-svc-google_plusone_share" ).after( "<p>Test</p>" );
 }, 1000);
 });
})(jQuery);

我需要这个用于 wordpres 站点，因此完整的解决方案包括：

add_action( 'wp_enqueue_scripts', 'enqueue_and_register_my_scripts' );

function enqueue_and_register_my_scripts(){
 wp_register_script( 'addthis', 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=youridhere', array(), false, true);
 wp_register_script( 'addthis-append', 'path/js/scripts.js', array('addthis'), false, true);

 wp_enqueue_script( 'addthis' );
 wp_enqueue_script( 'addthis-append' );

}

Add/append 个要添加此块的元素

Add/append element to addthis block

javascript

jquery

addthis