Wondering how to add label or text to html page based on input?

I'm making a chrome extension and im wondering how to add a label based on an input box triggered by a button.

I have tried many approaches like changing innerHTML of label i have used .value but nothing has worked. Here is code:

popup.js:

let AddNote = document.getElementById("AddNote");
let input = document.getElementById("input");

function addnote() {
    var elem = document.createElement('label');
    elem.innerHTML = input.value;    
    document.getElementsByTagName('body')[0].appendChild(elem);
}

chrome.storage.sync.get("note", ({ note }) => {
    AddNote.addEventListener("click", addnote);
  });

popup.html:

<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <form>
      <button id="AddNote">+</button>
      <input type="text" id="input"></input>
      <label id="label"></label>
    </form>
  </body>
</html>

background.js:

let note = '';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ note });
  console.log('Set note variable to empty.', `note: ${note}`);
});

manifest.json:

{
    "name": "name",
    "description": "desc.",
    "version": "1.0",
    "manifest_version": 3,
    "service_worker": "background.js",
    "action": {
        "default_popup": "popup.html"
      }
  }

Solution

let AddNote = document.getElementById("addNotes");

AddNote.addEventListener("click", function () {
      let elem = document.createElement('label')
      let space = document.createElement('br')
      elem.innerHTML = input.value;
      document.getElementsByTagName('body')[0].appendChild(space);
      document.getElementsByTagName('body')[0].appendChild(elem);

});

/* chrome.storage.sync.get("note", ({ note }) => {
   AddNote.addEventListener("click", addnote);
   });
*/

<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
      <button id="addNotes">+</button>
      <input type="text" id="input">
      <label id="label"></label>
  </body>
</html>

What I added/changed

1. The input tag is empty, which means that the closing tag isn't required. And so I removed it's closing from your HTML.

2. I commented around `chrome.storage.sync.get()`, since this will only work if stack snippet was an extension, which it isn't.
3. With the help of `br` tags, each time before adding the label I added a br, just so all the labels won't appear on the same row. You can remove that if you don't need it.

The main problem

In HTML5, If you have a form tag without an `action` attribute then the data will be sent to its own page. That being said, when clicking the `+` button the page would redirect to itself (looks like a refresh), resulting in the wrong conclusion thinking your code didn't work. I removed the `form` tag from your HTML.