how to add element to html with javascript-CodePudding

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

<li>
  <span >nickname:</span> message
</li>

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

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.

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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 >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.