We Keep Coding

Selecting an element with placing a custom dataset as the class

I'm new to javascript And facing a little issue,
I hope I will get the solution here
I have a nav Item with a data like this
<button data-home="home" class="nav-item"></button>
I did select the button element as a var and got its dataset
var navI = document.querySelector('.nav-item')
var homeC = navI.dataset
And then I wanted to set this item as a class to select a new element
new element,
<div class="home"></div>
And placed the dataset like this to select the element
var pageHome = document.querySelecter('.' + homeC)
But pageHome comes with a null element
Pls pass me a solution if possible

dataset is the entire data set, i.e. the result of all data-* attributes on the element or properties set via the element data API.
You need to reach into it and get the property you need. In short, change
var homeC = navI.dataset
to
var homeC = navI.dataset.home
Also be aware that these days var is not recommended; use let or const.
[EDIT]
Since you know say the home element has the ID "home", not the class "home", you need:
document.querySelector('#'+homeC);

Extract text from class using javascript

I have a couple of dashboard pages rendered and view elements coded for one page that looks like:
<td class="secondaryTabSelected" title="Pace">
<span tabindex="0">Pace</span>
</td>
I want to extract the name called "Pace" from above using Javascript, after the user has clicked on a specific tab title called "Pace". How can I achieve this?
I have tried:
var a = document.getElementsByClassName('secondaryTabSelected')[0];
var b = a.getElementsByClassName("child")[0].innerHTML;
alert(b); //assume b is my extracted text

document.querySelectorAll() is often a better function to use when trying to query the DOM for elements. It essentially allows you to use CSS selector syntax to perform more complicated queries (much like jQuery) and has support down to IE8.
In your case:
var spanElement = document.querySelectorAll(".secondaryTabSelected span")[0];
alert(spanElement.innerText);
Should perform what you are trying to achieve.

There are two issues in your code:
td need to be nested in in node, otherwise the browser will remove the tag.
you haven't put child as a class in html
You can either remove the first line and add class direclty in your target node or use childNodes instead
var a = document.getElementsByClassName('secondaryTabSelected')[0];
console.log(a);
var b = a.childNodes[1].innerHTML
console.log(b);
<div class="secondaryTabSelected" title="Pace">
<span tabindex="0">Pace</span>
</div>

How do I select a class with Inner html?

So I have two divs:
<div class="someGenericClass">1 Item</div>
<div class="someGenericClass">Another Item</div>
If I am given two variables:
classVariable = ".someGenericClass";
innerHTMLVariable = "Another Item";
How can I select the second div element based on class, and then the innerHTML if I have no say in adding an ID to that section. Using either javascript or jQuery. I know this isn't optimal to search by innerHTML, but I don't have a say in adding ID's and so on with what I'm doing, and I can't rely on the divs being in a set order.
$(classVariable).somehowInnerHTML?
Thanks

Well you already know that this is not very reliable to search by element innerHTML content, so.. I will give you some hints of how you can do it.
1). With pure Javascript I would use filter method of Array:
var classVariable = ".someGenericClass";
var innerHTMLVariable = "Another Item";
var found = [].slice.call(document.querySelectorAll(classVariable)).filter(function(div) {
return div.innerHTML === innerHTMLVariable;
});
This code will find all the divs with innerHTML content equal to innerHTMLVariable.
2). With jQuery:
$(classVariable + ':contains(' + innerHTMLVariable + ')');
Above code is not equivalent to pure js version, because it uses :contains selector, so it matches divs which have text content, but of course it will also match <div class="someGenericClass">Some text Another Item content</div>.
jQuery equivalent would be
$(classVariable).filter(function() {
return $(this).text() === innerHTMLVariable;
});

You can use
$(".someGenericClass:contains('Another Item')" ).<any action you want to do in this element>
To get the object in a variable:
var variable = $(".someGenericClass:contains('Another Item')" );

javascript grabbing span tag with both class and id

I have a span tag
<span class="vi-is1-prcp" id="v4-25">US $99.00</span>
I would like to grab it using pure javascript. JQuery or any other library is not allowed. Is that possible?
I recon that
getElementById('v4-25')
won't work since I have to specify class, too, correct?
Thank you,
So,
<div id="listprice">asdasdasdasdasd</div>
var string = document.getElementById('v4-25');
document.getElementById('listprice').innerHTML = string;
should print value of 'v4-25' in 'listpirce' ?
H

getElementById will work just fine. Just make sure you're running it after the page has loaded.

First of all, ids are unique. You can't have more than one. therefore, when you select element by id, you can only bring back one element (this is good).
Secondly, after you get an element, you have to do something with it. var string = document.getElementById('v4-25'); only gets you the element, but it looks like you want var string = document.getElementById('v4-25').innerHTML; for the price. If you do want the id instead you can do var string = document.getElementById('v4-25').id; but because that just returns "v4-25" it's a bit redundant.

There is no reason to add a class. Run the script after that dom element is loaded like this.
<span class="vi-is1-prcp" id="v4-25">US $99.00</span>
<script>
var elm = document.getElementById('v4-25');
</script>

How to swap two div tags?

I want to swap two html div tags entirely, tags and all. I tried the code below code but it does not work.
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id.next().next());
How to swap two div tags entirely.

You have some bracket mismatching in your code, it looks like you might be trying to do this:
jQuery('#AllBlock-'+Id).insertAfter($('#AllBlock-'+Id').next().next());
Which would take something like:
<div id="AllBlock-5"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
And, if called with Id 5, turn it into this:
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
<div id="AllBlock-5"></div>
This is because you're taking block 5, and moving it (using insertAfter) to the place after the block that's next().next() (or next-but-one) from itself, which would be block 7.
If you want to always swap #AllBlock-Id with #AllBlock-[Id+2], so they switch places and end up like the following:
<div id="AllBlock-7"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-5"></div>
You might want to try:
var $block = jQuery('#AllBlock-'+Id);
var $pivot = $block.next();
var $blockToSwap = $pivot.next();
$blockToSwap.insertBefore($pivot);
$block.insertAfter($pivot);

You can't do this because you can't concatenate a string and a jQuery object.
Try this:
var div = $('#AllBlock-'+Id);
div.insertAfter(div.next().next());

it should be like this
you should close the bracket after Id,
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id).next().next());

You'll need to detach the existing dom object first, then re-use it later:
$('#divid').detach().insertAfter('#someotherdivid');

What I understand is you want to swap a div when clicked with the last div. What will you do if it is the last div? move it to the top?
This solution should solve the problem, furthermore, you can modify this regex to match the format of your ID. This can probably be made more concise and robust. For example, you could get the last ID a bit more sophisticatedly. This may just be modifying the selector or something more. I mean, you do not want to go rearranging the footer or something just because its the last div on the page.
$('div').click(function() {
//set regex
var re = /(^\w+-)(\d+)$/i;
//get attr broken into parts
var str = $(this).attr('id').match(re)[1],
id = $(this).attr('id').match(re)[2];
//get div count and bulid last id
var lastStr = $('div:last').attr('id').match(re)[1],
lastID = $('div:last').attr('id').match(re)[2];
//if we have any div but the last, swap it with the end
if ( id !== lastID ) {
$(this).insertAfter('#'+lastStr+lastID);
}
//otherwise, move the last one to the top of the stack
else {
$(this).insertBefore('div:first');
} });
Check out this working fiddle: http://jsfiddle.net/sQYhD/
You may also be interested in the jquery-ui library: http://jqueryui.com/demos/sortable/