Q:

DOM appendChild not giving proper output

I am trying to write a program where in addItem function, the input value will be appended to the checkbox and trying to append the checkbox and the inputted value in an ul through li. 
I am able to see the checkbox in the output but not the inputted value. However, in console log I am able to see the inputted value. Hence, I think something is wrong in the logic, but not able to figure out what.

let input = document.getElementById('input');
let addButton = document.getElementById('addButton');
let removeButton = document.getElementById('removeButton');
let ul;
let li;
let inputTag;

const addItem = () => {
  let getItem = input.value;
  ul = document.getElementById('list');
  li = document.createElement('li');
  inputTag = document.createElement('input');
  inputTag.type = 'checkbox';
  inputTag.id = 'check';


  let label = document.createElement('label');
  let newItem = document.createTextNode(getItem);
  console.log(newItem)
  label.appendChild(newItem);
  inputTag.appendChild(label);
  li.appendChild(inputTag);
  ul.appendChild(li);

  input.value = '';
}

const removeItem = () => {

}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Hello, world!</title>
</head>

<body>
  <div class="container">

    <div class="controls">
      <h1>Todo App</h1>
      <input type="text" id="input">
      <button onclick=addItem() id="addButton">Add</button>
      <button id="removeButton">Remove</button>
    </div>
    <ul id="list">
      <li class="mycheck">
        <input type="checkbox" id="check">Eat
      </li>
      <li class="mycheck">
        <input type="checkbox" checked id="check">Sleep
      </li>

    </ul>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="script.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

A:

There are couple of changes you may need to do

addItem in <button onclick=addItem() need to be inside quotes.
There are duplicate id. id should be unique.
You are appending label inside input. That is the reason you cannot see the label text. 
Use label for attribute. Beside accessibility it will also check and uncheck the checkbox if you click on the text. For example if you click on Eat & Sleep text in your example , it will not make any change in the checkbox. But in this example if you create a checkbox through the input and click on the text you will see change in the state of the checkbox.

In your code you are loading script.js befor other library files. This may cause an error if script.js have any dependency on the library. First load library then load custom files

let input = document.getElementById('input');
let addButton = document.getElementById('addButton');
let removeButton = document.getElementById('removeButton');
let ul;
let li;
let inputTag;

const addItem = () => {
  let getItem = input.value;
  console.log(getItem)
  ul = document.getElementById('list');
  li = document.createElement('li');
  inputTag = document.createElement('input');
  inputTag.type = 'checkbox';
  inputTag.id = 'check_' + getItem;
  let label = document.createElement('label');
  label.setAttribute('for', 'check_' + getItem)
  let newItem = document.createTextNode(getItem, );
  label.appendChild(newItem);
  //inputTag.appendChild(label);

  li.appendChild(inputTag);
  li.appendChild(label);
  ul.appendChild(li);

  input.value = '';
}

const removeItem = () => {

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Hello, world!</title>

<div class="container">

  <div class="controls">
    <h1>Todo App</h1>
    <input type="text" id="input">
    <button onclick="addItem()" id="addButton">Add</button>
    <button id="removeButton">Remove</button>
  </div>
  <ul id="list">
    <li class="mycheck">
      <input type="checkbox" id="check">Eat
    </li>
    <li class="mycheck">
      <input type="checkbox" checked id="checkSleep">Sleep
    </li>

  </ul>
</div>

