Jquery функция, добавляемая в пустой div

Question

В настоящее время я пытаюсь научиться программировать, и я следую уроку, как сделать секундомер. Пока что у меня все работает, за исключением того, что когда я нажимаю кнопку круга, он не берет время круга и не добавляет его в пустой div. Есть идеи?

Это функция, которую я пытаюсь использовать:

function addLap(){
    var myLapDetails = "<div>Lap</div>";
    $("#myLapDetails").appendTo("#laps");
}

Здесь я пытаюсь ее разместить:

<div id="laps">

Есть мысли?

Answer 1

Вы можете создать элемент jQuery из строки и использовать его так:

function addLap() {
  var $myLapDetails = $("<div>Lap</div>");
  $myLapDetails.appendTo("#laps");
}

addLap();

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

Обратите внимание, что $ в имени переменной не требуется, но считается "idiomati c" jQuery, если такое есть.

Answer 2

Ваш селектор $("#myLapDetails") ищет существующий элемент, который имеет id="myLapDetails", которого не существует.

Вы можете добавить строку как переменную.

function addLap() {
  var myLapDetails = "<div>Lap</div>";
  $("#laps").append(myLapDetails);
}

addLap();

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