We Keep Coding

How to sort HTML elements alphabetically with vanilla JavaScript?

I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags
let animals = document.querySelectorAll('.animal-name');
let animalNames = [];
for(let i=0; i<animals.length; i++){
animalNames.push(animals[i].textContent)
}
animalNames = animalNames.sort();
for(let i=0; i<animals.length; i++){
animals[i].textContent = animalNames[i];
}
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:
const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();
Array.from(container.children)
.sort((a, b) => key(a).localeCompare(key(b)))
.forEach(child => container.appendChild(child));
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
</div>

You can do this by appending the elements to the DOM dynamically using JS.
For example,
const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
document.getElementById("animal-container").appendChild(
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">{word}</div>
</div>
)})

JS Delete div content and write new code

I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.

If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';

You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Hover not working for the image gallery

Image hover is not working in the below code. Whenever I try to hover on a particular image that particular image is not being displayed. But if I remove the second portion (In comments in code) from code then it's working perfectly.
<div class="container marginbot-50">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">1. Meadows Towers</h2>
<div class="divider-header"></div>
<p style="text-align:justify">It is a major construction firm.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
<!--*****************Second portion*******************-->
<div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
<div class="section-heading text-center">
<h2 class="h-bold" style="margin-top:90px">2.Shangrilla</h2>
<div class="divider-header"></div>
<p style="text-align:justify"> Construction is a major construction firm.
Our goal is to reach all the section of people from 2BHK, 3BHK and 4BHK.
</p>
</div>
</div>
</div>
</div>
<div class="gallery" align="center"><br>
<h4>Check details about project below</h4>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="img/works/1.jpg" alt="" />
<img onmouseover="preview.src=img2.src" name="img2" src="img/works/2.jpg" alt="" />
<img onmouseover="preview.src=img3.src" name="img3" src="img/works/3.jpg" alt="" />
<img onmouseover="preview.src=img4.src" name="img4" src="img/works/4.jpg" alt="" />
<img onmouseover="preview.src=img5.src" name="img5" src="img/works/5.jpg" alt="" />
</div>
<div class="preview" align="center">
<img name="preview" src="img/works/1.jpg" alt=""/>
</div>
</body>

Have this function which accepts target and source and changes to required target's src
function changeSrc(control,target)
{
var targets=target.children[0]; //get its children
targets.setAttribute('src',control.getAttribute('src'));//change its src
}
Your updated HTML
Instead of onmouseover="preview.src=img1.src" call function onmouseover as onmouseover="javascript:changeSrc(this,this.parentElement.nextElementSibling)"
DEMO HERE
The problem with your previous code was, there were 2 elements with same name preview and when you said preview.src it fetched list of elements and wasn't able to assign it to proper preview - element.

Full width Responsive Images Overlap Bootstrap 3

I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.

You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.

Swapping images randomly in my web

I want the images/r1.jpg, r2.jpg, r3.jpg, r4.jpg to use the same array I wrote at the top.
so these five images in grid as a part will automatic displaying the same content randomly.
The other <div class="row"> which refers to my row will do the same stuff.
I have 5 parts in total. The other four parts will have their own contents.
I tried everything I can do and I changed the id stuff but it doesn't work.
<script language="javascript">
var picRoots = ['images/r1.jpg','images/r2.jpg','images/r3.jpg','images/r4.jpg','images/r5.jpg','images/r6.jpg','images/r7.jpg','images/r8.jpg','images/r9.jpg','images/r10.jpg'];
picRoots.sort(function(){return Math.random()>0.5?-1:1;});
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for(i=0; i < picRoots.length; i++) {
imgO[i] = new Image();
imgO[i].src = picRoots[i];
}
function swapImage() {
curPic = (++curPic > picRoots.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage,100);
}
window.onload=function() {
imgCont = document.getElementById('imgBanner1');
swapImage();
}
</script>
<body>
<div style="text-align:center" class="grid">
<div class="row">
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/r5.jpg" id="imgBanner1"/> </div>
<div class="image"> <img src="images/r1.jpg" /> </div>
<div class="image"> <img src="images/r2.jpg" /> </div>
<div class="image"> <img src="images/r3.jpg" /> </div>
<div class="image"> <img src="images/r4.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
<div class="image"> <img src="images/black.jpg" /> </div>
</div>
</body>