Создание элемента внутри другого

Question

В readyсоздаю div элемент с нужным идом. После этого хочу получить ид элемента getElementById и использовать для onclick. Но в результате ошибка menu.js:10 Uncaught TypeError: Cannot set property 'onclick' of null.

$(document).ready(function() {
    $('#block_id').append('<div id="menu_id"></div>');
    
});

var menu = document.getElementById('menu_id');

menu.onclick = function () {

}

Как правильно создавать элементы?

Решение проблемы:

var menu = document.createElement("div");
menu.id = "menu_id";
$(document).ready(function() {
    document.getElementById('block_id').appendChild(menu);
});

Answer 1

Если вы уже начали использовать JQ так и продолжайте его использовать.
Зачем мешать код?

$(document).ready(function() {
  $('#block_id').append($('<div id="menu_id"/>')); // Создаём элементв <div id="menu_id"></div> внутри <div id="block_id"></div>
  
  $('#menu_id').on('click', function() { // Вешаем слушатель клика на элемент #menu_id
    console.info('click');
  });
});

#block_id {
  display: inline-block;
  background: red;
  padding: 50px;
}

#menu_id {
  width: 100px;
  height: 100px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="block_id"></div>

Вариант на JS

document.addEventListener('DOMContentLoaded', function() { // После загрузки DOM выполняем следующее:
  let menu = document.createElement('DIV'); // Создаём элемент
  menu.id = 'menu_id'; // Даём ему id menu_id
  document.querySelector('#block_id').append(menu); // Добавляем его в #block_id

  menu.addEventListener('click', function() { // Вешаем слушатель клика на #menu_id
    console.info('click');
  });
});

#block_id {
  display: inline-block;
  background: red;
  padding: 50px;
}

#menu_id {
  width: 100px;
  height: 100px;
  background: blue;
}

<div id="block_id"></div>

БЛОГ НА HUSL

Создание элемента внутри другого

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