how to add element to html with javascript
Question
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.
Code:
<body>
<ul id="messages">
</ul>
<form id="form" action="">
<input id="messageinput" autocomplete="off" /><button>Send</button>
<input id="usernameinput" autocomplete="off" />
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
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);
}); </script> </body>
I am using this code, I tried many things to make the username bold but none of them worked.
3 answers
solution1
1 2022-07-21 16:58:26
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
solution2
0 2022-07-21 17:01:13
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.
solution3
0 2022-07-21 17:55:23
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.