title: Unable to display the error message right below the input field in javascript
body: <p>I am creating a very basic todo application. My goal is to display an error message <strong>Please enter an input</strong> If the user press the 'add todo' button without entering any input. Now, when I am pressing the 'add todo' button without entering any input, then I am unable to see the error message but when I am inspecting, then, I can see the error message has been successfully added below the input field.</p>
  <p><a href="https://i.stack.imgur.com/mPxMV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mPxMV.jpg" alt="enter image description here" /></a></p>
  <p>index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;p id=&quot;inp&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;inputText&quot; id=&quot;userInput&quot; /&gt;&lt;/p&gt;
        &lt;p id=&quot;add&quot;&gt;&lt;button class=&quot;addbtn&quot;&gt;Add Todo&lt;/button&gt;&lt;/p&gt;
        &lt;p id=&quot;del&quot;&gt;&lt;button class=&quot;deletebtn&quot;&gt;Delete Todo&lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>index.js</p>
  <pre><code>const addButton = document.querySelector('.addbtn');
  const userInput = document.querySelector('#userInput');
  
  addButton.addEventListener('click', (e) =&gt; {
      e.preventDefault();
      const uinput = userInput.value;
  
      if(uinput === '') {
          const p = document.createElement('p');
          const message = document.createTextNode('Please enter an input');
          p.appendChild(message);
          userInput.appendChild(p);
      } else {
          return;
      }
  });
  </code></pre>
  <p>Can anyone please tell me how can I solve this error and display the error message on the browser right below the input field please?</p>