CODEWITHSUNDEEP
javascripthtmlhtml-lists
RengaN
RengaN

Reputation: 9

how to add element to html with javascript

How can I put this code inside <ul> with javascript?

<li>
  <span class="username">nickname:</span> message
</li>

Edit: I'm making a chat website and I want to bold the username part, but I can't.

website image

Code:

var socket = io();

var messages = document.getElementById('messages');
var form = document.getElementById('form');
var message = document.getElementById('messageinput');
var username = document.getElementById('usernameinput');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (!username.value) {
    var item = document.createElement('li');
    item.textContent = `Error: Write a username`;
    item.style.background = '#ff5e69'
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
  } else {
    if (message.value) {
      socket.emit('chat message', {
        username: username.value,
        msg: message.value
      });
      message.value = '';
    }
  }
});

socket.on('chat message', function(data) {
  var item = document.createElement('li');
  item.textContent = `${data.username}: ${data.msg}`;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);



});
<ul id="messages">


</ul>
<form id="form" action="">
  <input id="messageinput" autocomplete="off" /><button>Send</button>
  <input id="usernameinput" autocomplete="off" />
</form>

I am using this code, I tried many things to make the username bold but none of them worked.

Upvotes: -1

Views: 116

Answers (3)

Daniel Black
Daniel Black

Reputation: 605

EDIT: As pointed out in the comments by tacoshy there are a few potential issues with this method. These issues are:

  • Content already found in the element will be overwritten
  • This method is slower as the DOM needs to be prepared
  • This method could potentially open up the possibility of XSS attacks if the inner html is set from user input.

Due to these potential issues, it may be better to go with one of the other options on this question.

If your ul has an id you could do something like this:

var htmlToAppend = '<li><span class="username">nickname:</span> message</li>'
var element = document.getElementById("list")

element.innerHTML = htmlToAppend
<ul id='list'>

</ul>

Where the innerHTML attribute of element is the HTML contained by the element. Editing this attribute will immediately reflect on the page.

Upvotes: -1

Eren
Eren

Reputation: 108

Try

 document.querySelector("#your_fav_form").addEventListener("submit", (e) => {
    e.preventDefault()

    let username = document.querySelector("#username").value.trim();

    if (username == ""){
      let message = document.querySelector("#message");
      let li = document.createElement("li");
      li.setAttribute("class", "username");
      li.innerText = "Please enter your username";

      if (message.innerText.trim() == "") {
        message.appendChild(li);
      }
    } else {
      alert("your socket logic goes here");
    }
  });
.username{
      font-weight: bold;
<ul id="message"></ul>

<form id="your_fav_form" method="POST" action="">
  <input
    type="text"
    id="username"
    name="username"
    autocomplete="off"
    data-id="username"
  />
  <button type="submit">Submit Form</button>
</form>

Upvotes: 1

Uriel Cisneros
Uriel Cisneros

Reputation: 126

you can do it like this:

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

I leave a reference link

Link:https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Upvotes: 1

Related Questions