jQuery addClass example

Change class name on click in jQuery

by Sedbol

HTML

<div id="elbed"></div>
<div class="app">

CSS

.yo{
            width: 130px;
            height: 120px;
            display: block;
            margin-left: 10px;
            position: relative;
            float: left;
            margin-top: 10px;
        }
        .yo1{
            text-align: center;
            word-wrap: break-word;
            height: 35px;
            overflow: hidden;
            text-overflow: ellipsis;
            outline-width: 10px;
        }
        .el{
            position: absolute;
            color: deepskyblue;
            left: 30px;
            top: 20px;
            text-decoration: none;
        }
        .el1{
            position: absolute;
            color: deepskyblue;
            left: 30px;
            top: 40px;
            text-decoration: none;
        }

JavaScript

var IDimg="-5tHiZACxbI",
        ImgYuoTube ="https://img.youtube.com/vi/"+IDimg+"/mqdefault.jpg";


    const app = document.querySelector(".app");
    const kn = document.createElement("input");
    kn.type="button";
    kn.value="Кнопка";
    kn.onclick = function f() {
        go();
    };

    document.getElementById('elbed').appendChild(kn);

    function go() {

    for (let i=0; i < 1000; i++) {
        const youtube = document.createElement("div");
        const title = document.createElement("div");
        youtube.className="yo";
        youtube.innerHTML = "<a href='#' class='el'>Просмотор</a><a href='#' class='el1'>Добавить</a><img style='width: 130px;height: 90px' src='"+ImgYuoTube+"'>";
        youtube.setAttribute("youtub_clip", i);
        title.innerText="Не понятное название ";
        title.className="yo1";
        app.appendChild(youtube);
        youtube.appendChild(title);
        youtube.addEventListener('click', () => {
            console.log("ТЕСТ", i);
        });
    }

}