0
161
Viewscómo agregar elementos a html con javascript
¿Cómo puedo poner este código dentro de <ul> con javascript?
<li> <span class="username">nickname:</span> message </li>Editar: estoy creando un sitio web de chat y quiero poner en negrita la parte del nombre de usuario, pero no puedo.
Código:
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>Estoy usando este código, probé muchas cosas para poner el nombre de usuario en negrita, pero ninguna funcionó.
3 answers
Answer question0
puedes hacerlo así:
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>dejo un link de referencia
Enlace: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
0
Probar
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>0
EDITAR: Como se señaló en los comentarios de tacoshy, existen algunos problemas potenciales con este método. Estos problemas son:
- El contenido que ya se encuentra en el elemento se sobrescribirá
- Este método es más lento ya que el DOM debe estar preparado
- Este método podría potencialmente abrir la posibilidad de ataques XSS si el html interno se configura a partir de la entrada del usuario.
Debido a estos problemas potenciales, puede ser mejor optar por una de las otras opciones en esta pregunta.
Si su ul tiene una identificación, podría hacer algo como esto:
var htmlToAppend = '<li><span class="username">nickname:</span> message</li>' var element = document.getElementById("list") element.innerHTML = htmlToAppend <ul id='list'> </ul> Donde el atributo innerHTML del elemento es el HTML contenido por el elemento. La edición de este atributo se reflejará inmediatamente en la página.