如何使用javascript将元素添加到html

Question

如何使用 javascript 将此代码放入<ul>中。

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

编辑：我正在制作一个聊天网站，我想将用户名部分加粗，但我不能。

网站图片

代码：

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

我正在使用这段代码，我尝试了很多方法来使用户名加粗，但都没有奏效。

Answer 1

你可以这样做：

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>

我留下参考链接

链接： https ://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 2

如果你的ul有一个 id，你可以这样做：

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

 <ul id='list'> </ul>

其中 element 的innerHTML属性是该元素所包含的 HTML。 编辑此属性将立即反映在页面上。

Answer 3

尝试

 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>

如何使用javascript将元素添加到html

问题描述

3 个解决方案

解决方案1
1 2022-07-21 16:58:26

解决方案2
0 2022-07-21 17:01:13

解决方案3
0 2022-07-21 17:55:23

如何使用javascript将元素添加到html

问题描述

3 个解决方案

解决方案1 1 2022-07-21 16:58:26

解决方案2 0 2022-07-21 17:01:13

解决方案3 0 2022-07-21 17:55:23

解决方案1
1 2022-07-21 16:58:26

解决方案2
0 2022-07-21 17:01:13

解决方案3
0 2022-07-21 17:55:23