Создать div и определить его через getElementById

Question

Возможно ли через createElement создать такой div, чтобы его потом мог определить getElementById?

$(document).ready(function() {
    let main = document.querySelector('#extra_menu');
    let div = document.createElement('div');
    div.id = "index_1";
    div.innerHTML = "Hello";
    main.append(div);
});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="extra_menu"></div>
</body>
</html>

var click_1 = document.getElementById('index_1');

click_1.onclick = function() {
    click_1.attr("style", "color: red");
}

Answer 1

Элемента ещё нет на странице, когда вы прикрепляете к нему слушателя. Можно сделать так:

$(document).ready(function() {
    let main = document.querySelector('#extra_menu');
    let div = document.createElement('div');
    div.id = "index_1";
    div.innerHTML = "Hello";
    div.addEventListener("click", test);
   
    main.append(div);
});

let test = function() {
    this.style.color = 'red';    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="extra_menu"></div>

Либо использовать делегирование

БЛОГ НА HUSL

Создать div и определить его через getElementById

Ответы (1 шт):