We Keep Coding

Selecting by element type then class name - jQuery

In my HTML I have multiple empty divs and I would like to select every div with the class highlight using the query $("input.highlight:div") but it returns an error and I can't seem to find an answer anywhere.
This is my HTML:
<div>Div 1</div>
<div class="highlight">Div 2</div>
<div id="third">Div 3</div>
<div class="highlight">Div 4</div>

you can do something like this.
first select div then use a class with it
$("div.highlight")
or if you have .highlight on div you can directly select that div using that class name.
$(".highlight")
$(document).ready(function(){
var highlightsDiv=$("div.highlight")
console.log(highlightsDiv.length)
highlightsDiv.css({"color":"green"})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Div 1</div>
<div class="highlight">Div 2</div>
<div id="third">Div 3</div>
<div class="highlight">Div 4</div>
<div class="highlight">Div 5</div>

insertAdjacentHTML not inserting passed string correctly

I want to insert html after a particular element but insertAdjacentHTML wont let me add a closing tag first.
If I do
elm.insertAdjacentHTML('afterend', '</div><section class="block">');
the expected result is
<element></element></div><section class="block">
the result it's returning
<element></element><section class="block"></div>
Is there a way around this?
Edit:
Basically what i'm trying to do is loop through each element and split them into two divs
<div class="column">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
<div class="block">block 4</div>
<div class="block">block 5</div>
<div class="block">block 6</div>
<div class="block">block 7</div>
<div class="block">block 8</div>
</div>
Expected result
<div class="column">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
<div class="block">block 4</div>
</div>
<div class="column">
<div class="block">block 5</div>
<div class="block">block 6</div>
<div class="block">block 7</div>
<div class="block">block 8</div>
</div>
JS
const blocks = document.querySelectorAll(".block");
let half = Math.ceil(blocks.length / 2 - 1);
blocks[half].insertAdjacentHTML('afterend', '</div><div class="column">');

If I get your requirement right, this is what you want to do:
elm.parentNode.insertAdjacentHTML('afterend', '<section class="block"></section>');
If the div is not the direct parent element, you might want to use Element.closest(selector) instead:
elm.closest('div.myDiv').insertAdjacentHTML('afterend', '<section class="block"></section>');
update
You have elaborated on your requirements further, this is how to do it in Javascript:
const blocks = [...document.querySelectorAll('.block')];
const middle = Math.ceil(blocks.length / 2 - 1);
const column = document.querySelector('.column');
const parent = document.querySelector('.parent');
const col1 = document.createElement('div');
col1.className = 'column';
const col2 = document.createElement('div');
col2.className = 'column';
blocks.forEach((block, index) => {
if (index <= middle) {
col1.appendChild(block)
} else {
col2.appendChild(block)
}
})
parent.removeChild(column)
parent.appendChild(col1);
parent.appendChild(col2);
.column+.column {
color: green;
}
<div class="parent">
<div class="column">
<div class="block">block 1</div>
<div class="block">block 2</div>
<div class="block">block 3</div>
<div class="block">block 4</div>
<div class="block">block 5</div>
<div class="block">block 6</div>
<div class="block">block 7</div>
<div class="block">block 8</div>
</div>
</div>
Resulting DOM:

How toggle multiple element with one .toggle()

I know this question is kind of weird but i am not able to find out this
For Example : there is some div with ids
HTML
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
and i want to toggle some specific div
like
test1, test4 and test6
so i have to do like this
$('#test1').toggle();
$('#test4').toggle();
$('#test6').toggle();
but i want to know is there any way to do that like
$('#test1', '#test4', '#test6').toggle();
I know it can be done if i just give same class on the div which i want to toggle.
but i want to know this for that reason i asked

Sure you can, simply comma separate your ID selector:
$('#test1, #test4, #test6').toggle();
$("#toggle").on("click", function(){
$('#test1, #test4, #test6').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE 1, 4, 6</button>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
A much reusable code would allow you to toggle any desired elements without copy/pasting your JavaScript functions.
Here's an example where the desired selector to toggle is stored within the data-toggle attribute of the action element:
$("[data-toggle]").on("click", function(){
$(this.dataset.toggle).toggle();
});
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-toggle="#test1,#test6">Toggle 1, 6</button>
<button data-toggle="#test3,#test4">Toggle 3, 4</button>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
<div id="test4">test 4</div>
<div id="test5">test 5</div>
<div id="test6">test 6</div>
<button data-toggle=".info">Toggle .info</button>
This is some
<span class="info">OLD</span>
<span class="info hidden">NEW!!!</span>
info

How do I handle repetitive / iterative fadeouts of similar class divs in jQuery?

I have 6 divs on a page, each has a layer on top that will fadeout on hover, and fade back in on mouseleave. What I have now is this, but the stack overruns if I do it for individual div layers. How do I assign the functionality to all six top layers in a single code block?Thanks for any clues!
JSFIddle here
<script>
$(function(){
$(".hover6").mouseenter(function() {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$("#div6").mouseleave(function() {
$(".hover6").fadeIn('slow');
});
$(this).siblings().fadeOut();
})
</script>
<script>
$(function(){
$(".hover5").mouseenter(function() {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$("#div5").mouseleave(function() {
$(".hover5").fadeIn('slow');
});
$(this).siblings().fadeOut();
})
</script>
//and so on - identical script for other 4 divs

Use common class then you can use class selector to bind events.
HTML
<div id="div1" class="divContainer">
<div class='hover hover1'>Overlay on top</div>
<div>subdiv in div 1</div>
<div>subdiv in div 1</div>
</div>
Script
//Bind event using common class
$(".hover").mouseenter(function () {
$(this).siblings().fadeIn();
$(this).fadeOut();
});
$(".divContainer").mouseleave(function () {
//Use find
var hoverElem = $(this).find(".hover");
hoverElem.fadeIn('slow');
hoverElem.siblings().fadeOut();
});
DEMO

<div class="wrapper">
<div id="div1" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 1</div>
<div>subdiv in div 1</div>
</div>
<div id="div2" class="mouse-enter">
<p class="auto-style1">This is div2</p>
<div>Overlay on top</div>
<div>subdiv in div 2</div>
<div>subdiv in div 2</div>
</div>
<div id="div3" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 3</div>
<div>subdiv in div 3</div>
</div>
<div id="div4" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 4</div>
<div>subdiv in div 4</div>
</div>
<div id="div5" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 5</div>
<div>subdiv in div 5</div>
</div>
<div id="div6" class="mouse-enter">
<div>Overlay on top</div>
<div>subdiv in div 6</div>
<div>subdiv in div 6</div>
</div>
</div>
$('.mouse-enter').click(
function(){
$(this).animate({'width': '100%', 'height':'100%'},600).siblings().animate({'width':'0','height':'0'},600);
$('<button class="show">XClose</button>')
.appendTo ('.wrapper');
});
$(document).on('click','.show', function() {
$(this).animate({
'width': '0',
'height': '0'
}, 600).siblings().animate({
'width': '50%',
'height': '33.33%'
}, 600);
$(this).remove();
});

jQuery Rearrange HTML Inside Div

I have HTML like this -
<div class="outerDiv" id="od_1">
<label>Div 1</label>
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
<div class="outerDiv" id="od_2">
<label>Div 2</label>
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
What I want to achieve through jQuery is this -
<div class="outerDiv" id="od_1">
<label>Div 1</label>
<div class="innerDivBox">
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
</div>
<div class="outerDiv" id="od_2">
<label>Div 2</label>
<div class="innerDivBox">
<div class="innerDiv">Inner Div 1</div>
<div class="innerDiv">Inner Div 2</div>
<div class="innerDiv">Inner Div 3</div>
</div>
</div>
I started with looping through div with class "outerDiv" -
$('.outerDiv').each(function(i, obj) {
var divId = this.id;
});
But I am not sure how exactly I should proceed from here. Any help would be appreciated. Thanks.

You could use find() and wrapAll() to group the inner divs with a common parent:
$('.outerDiv').each(function(i, obj) {
$(this).find('.innerDiv').wrapAll('<div class="innerDivBox">');
});
jsFiddle here.

Try this:
$('.outerDiv').each(function() {
$(this).append( $('<div class="innerDivBox"></div>').append( $(this).find('.innerDiv') ) );
});