We Keep Coding

Change innerHTML of span which part of the name changes in time

I'm trying to change the .innerHTML of a span for which the name changes every time I refresh the page (only some part of that name changes)
So for example, I always use this to change the span's innerHTML:
document.getElementsByClassName('something')[0].innerHTML='new text';
but my problem is that the site now adds random characters after that "something", for example:
<span class="something RANDOM123 random212312">some text</span>
and my question is, is this possible to find this span and change the innerHTML of it just by looking for the first part of the class name which is "something"?

Maybe you can use partial selector:
$('[class^="value"]') <-- starts with string
$('[class$="value"]') <-- ends with string
// using jQuery
$('[class^="something"]')[0].innerHTML='new text';
// using document
document.querySelectorAll('[class^="something"]')[1].innerHTML='new other text';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="something RANDOM123 random212312">some text</span>
<span class="something RANDOM123 random212312">some other text</span>

Can you just add an ID to the spans you want to update? Then just search by those IDs? That's likely the correct way to do it. Otherwise, you might have to write your own thing that loops through the collection of spans in the document and check the class to see if it starts with "something" (prehaps indexOf === 0).
function GetSomethingSpans() {
const AllSpans = document.getElementsByTagName('span');
const AllSpanCount = AllSpans.length;
const SomethingSpans = [];
for (var i = 0; i < AllSpanCount; i++) {
if (AllSpans[i].className.indexOf("something") === 0) {
SomethingSpans.push(AllSpans[i]);
}
}
return SomethingSpans;
}
This is entirely untested, and there might be bugs. But hopefully it's a useful starting point. Could probably adjust it to have a parameter that is the class you're looking for, and you don't have to make it be the first class... hopefully this gets you going.

document.querySelectorAll("something") will retrieve all elements that have that class, regardless of what others classes are added to the element.

How to increase a number for the same class?

I would like to display an increased number (starting with 1 and ending with 47) for each class called quiz_image.
The HTML looks kind of like this:
<div class="quiz_image">
Content here
</div>
<div class="quiz_image">
Content here
</div>
<div class="quiz_image">
Content here
</div>
In order to display the number before the class quiz_image, I have tried it like this:
var i = 1;
$('.quiz_image').before(i);
i++;
In my code above the number will not increase, since there is probably a loop needed and I have no idea how to start a loop in this case. I hope somebody can help out on this.

When you use jQuery to get a selector it will return an array of elements. So you'll want to loop through them. I would suggest with something like the jQuery .each() function, which natively provides you with a 0 based index, you could try something like:
$('.quiz_image').each(function(i){
$(this).before(i + 1); // add one so we dont start at 0
});

Loopin all quiz_image and use their index numbers
$('.quiz_image').each(function(index){
$(this).before(index+1);
});
Working Demo

before function in jQuery sets the content before the specified element , and it also accepts the function so we can do it like the below example.
index function Search for a given element from among the matched elements
$('.quiz_image').before(function(){
return $('.quiz_image').index(this)+1
});

Why do you want to change the class for each image?
Rather give each one an ID.
<div class="quiz_image"></div>
<script>
counter = 0;
var quiz_id = $(".quiz_image").prop("id");
$(".quiz_image").each(function(){
counter++;
quiz_id = quiz_id + counter
$(".quiz_image").prop("id",quiz_id);
});

Userscript to remove Html-Lines, class and Attributes

I want to create one short userscript because I hate this annoying yellow smileys!
There are two html lines witch turns the normal smiley ( :) ) into the yellow icon
<span class="emoticon_text" aria-hidden="true"> :) </span>
<span title=":)" class="emoticon emoticon_smile"></span>
So, in the first line I have to remove the class and the aria-hidden
And in the second the whole line, it can be class="emoticon emoticon_smile", but also something like class="emoticon emoticon_cool"
I tried with:
document.getElementsByClassName("emoticon_ text").removeAttribute("aria-hidden"); document.getElementsByClassName("emoticon_ text").className = "";
but it failed, so I hope you guys can help me, because my Javescript/jQuery skills are bad..
Thank you
sorry for my grammar mistakes

document.getElementsByClassName returns a HTMLCollection, which is basically a array of elements matched. You have to iterate trough that collection and run your code for each of the elements matched.
Secondly, you'll need to find the emoticon itself and remove it, for that you need to get each emoticon's parent and tell it to remove the element. In the end, your code will look similar to this:
//Finds all emoticon texts
var emoticonTexts = document.getElementsByClassName("emoticon_text");
//Iterate over the results and remove the desired attributes
for (var i = emoticonTexts.length-1; i >= 0; i -= 1) {
var element = emoticonTexts[i];
element.removeAttribute("aria-hidden");
element.className = "";
}
//Find all emoticon images
var emoticons = document.getElementsByClassName("emoticon");
//Iterate over the results and remove them from the page
for (var i = emoticons.length-1; i >= 0; i -= 1) {
var element = emoticons[i];
element.parentNode.removeChild(element);
}
Also available as an example on JSFiddle

I would look into using jQuery. Once you have the jQuery library referenced in your project your solution should be as simple as:
$(".emoticon_text").removeAttr("aria-hidden").removeClass("emoticon_text");

Finding a Nested <li>, and modifying it

I'm writing a very conflated Android Unit Conversion application, using all kinds of terrible things to make it pretty. Essentially its executing JS via vebviews, and displaying html formatted according to arbitrary size lists in fancy spinners, with abbreviations underneath... blah blah...
Anyway. Right now I've got somthing like this:
for (l = 0; l < this.slotData.length; l += 1) {
out += '<li>' + this.slotData[l].values[i] + " "+'<li class="sw-right">'+this.slotData[l].abbreviations[i]+'</li></li>';
}
Where slotData[l] represents say "Milimeters" and abbreviations is "Mm", which is underneath, and formatted slightly differently. The idea is that you can enter numbers, and they will show up, underneath the Large Milimeters, next to the small Mm, so that you can see "4400mm".
I'm trying to access and modify the child li, of class "sw-right" at a different point in my code. Wondering if anyone knows an easy way to do this? I can access the parent without trouble, but I'm not sure what the proper way to go from there is...
My access is somthing like this:
this.slotEl[slot].......
Anythoughts?
Thanks guys...
Nathaniel.

You should not try to nest <li> elements. HTML syntax does not permit nesting list items. Since the </li> closing tag is optional, a browser might well just treat your nested item as a sibling of the first one anyway, and discard the second close tag as a double-close on the second item.
Addional: Since you are trying to compose a list item of two parts, maybe what you really want is a definition list. For setting attributes on ranges nested inside of tags, consider using span.

I suggest using jquery:
$('li.sw-right').html('html_you_want_set');

you could use
var myNestedLI = document.getElementsByClassName( 'sw-right' )[ 0 ]
or
var topElements = document.getElementsByTagName( 'li' );
var nestedElements = []
for( var i = 0; i < topElements.length; i ++ )
{
var theseElements = topElements[ i ].getElementsByTagName( 'li' )
for( var j = 0 ; j < theseElements.length; j ++ ) nestedElements.push( theseElements[ j ] )
}
// nestedElements now contains all nested LI elements

As Sparky pointed out, you can't nest <li> tags like that. The second li will be treated as a separate list item from the first, making them siblings. Instead what you want are two separate <div>s inside your <li>. Div is a generic block-level element. (Block-level means there's a line break between them, and generic means that the div's meaning and style is entirely up to you.)
I'd suggest this more descriptive markup:
<li class="calculated-value">
<div class="unit">*large unit name*</div>
<div class="value">*small value with abbreviation*</div>
</li>
In your CSS, the following rule will make the value div display smaller:
li.calculated-value div.value { font-size: 75%; }
(You can add additional rules to give it an indentation, better spacing, bold or color settings, etc. And you can add another line for div.unit that styles that one separately.)

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/