GetElementsByTagName and two worded Wordpress Class Tags

StackOverflow https://stackoverflow.com/questions/23660128

Question

My boss is nuts, so I must do weirds things.

I have the shareaholic Plug-in on wordpress. Due the plugin does not haver the "like" button, I included it in code direct form Facebook:

<!--  Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.  -->

<div id="fb-root"></div>

<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&appId=xxxxxxxxxxxx&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>   

<!-- Place the code for your plugin wherever you want the plugin to appear on your page. -->    

<div class="fb-like" data-href="http://www.example.com" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>

Easy as cake, just put the code where I want. So, I put it above Shareaholic buttons. In other words, first the like button and then, in the next line, the shareaholic buttons

Of course, my boss don't like it and he wants all the buttons in one straight line.

I take a look to the plug-in and is not simple, so I want, via javascript, modify the tag and append code with the button, the div with the "fb-like" tag name.

However, Wordpress Tag names are two worded. For example:

<body class="home page page-id-7 page-template-default logged-in admin-bar no-customize-support">
 ....
 ....
 <div class="shareaholic-share-buttons-wrapper shareaholic-ui">
 ...
 </div>
 ...
</body>

How I refer to that tag name?

The code (in Javascript):

var node = document.getElementsByTagName("shareaholic-share-buttons-wrapper")[0];
alert (node);

Shows an empty alert dialog (instead of an alert dialog with a 'null' message or a [object])

Of curse, the code:

var node = document.getElementsByTagName("shareaholic-share-buttons-wrapper shareaholic-ui")[0];
alert (node);

Won't work due getElementsByTagName become undefined.

So, I don't know what I am doing wrong, I can't call the tag I want. Firebug give me this path of css where I want to append the new code:

html.firefox 
body.home 
div#art-main 
div.art-sheet 
div.art-layout-wrapper 
div.art-content-layout 
div.art-content-layout-row 
div.art-layout-cell 
article#post-7.art-post 
div.art-postcontent 
div.shareaholic-canvas 
div.shareaholic-share-buttons-container 
div.shareaholic-share-buttons-wrapper 
ul.shareaholic-share-buttons 
li.shareaholic-share-button 
div.shareaholic-share-button-container 
a 
span.share-button-verb b

How can I use appendChild() via javascript (or jquery) in wordpress to create new div in li.shareaholic-share-button Tag? how I refer it with getElementsByTagName?

Was it helpful?

Solution

You are using Class names for tag selector.

Your code should be

var node = document.getElementsByTagName("div")[0];

Since you have also included jquery in the question tag, lets see the awesomeness of jquery

you need to include

var node = $(".shareaholic-share-buttons-wrapper");

In terms of multiple class selectors:

var node = document.querySelector(".shareaholic-share-buttons-wrapper.shareaholic-ui");

Again jquery way:

var node = $(".shareaholic-share-buttons-wrapper.shareaholic-ui");
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top