Я хочу добавить значок с потрясающим шрифтом рядом с комментариями пользователей. Это будет выглядеть так: ![enter image description here](https://i.stack.imgur.com/X9C9B.png)
This is what it looks like with just html and css together, with nothing commented out/deleted.
html:
Паук 2 часа а go Людям нравится комментировать
css:
.output {
margin: 30px 0px 0px 50px;
width: 550px;
}
.output h6,
output i {
display: inline-block;
}
.output .username {
margin: 0px 10px 0px 0px;
text-transform: capitalize;
}
.output .date {
color: #193B59;
font-size: 14px;
}
.icon {
width: 30px;
height: 30px;
border: none;
cursor: pointer;
float: right;
}
.output p {
font-size: 14px;
word-break: break-word;
white-space: pre-line;
}
Хорошо, я сначала прокомментирую это, чтобы позволить некоторому коду вступить в силу в js: все, что находится между фигурными скобками, закомментировано.
<div class="commentsWindow">
<div class="output" id="output">
{{!-- <h6 class="username">The Spider</h6>
<h6 class="date">2 hours ago</h6>
<i class="fas fa-ellipsis-v icon" id="myicon"></i>
<p class="comments">People like commenting </p> --}}
</div>
</div>
Теперь перейдем к моему js файлу: это код, который я использую для вывода комментариев пользователей:
js :
function loadcomments() {
fetch('http://localhost:5502' + '/get_messages')
.then(response => {
if (response.ok) {
console.log('success')
console.log(response);
} else {
console.log('failure')
}
return response.json();
})
.then(function(data) {
io.emit("new_message", data)
io.on("new_message", function(data) {
console.log("Server says", data);
output.innerHTML = '';
data.forEach(function(user) {
var newUser = document.createElement("div");
var newName = document.createElement("h6");
var newDate = document.createElement("h6");
var newMessage = document.createElement("p");
var newIcon = document.createElement("i");
newUser.className = 'output';
newName.className = 'username';
newDate.className = 'date';
newIcon.setAttribute("class", "fas fa-ellipsis-v icon");
newMessage.className = 'comments';
var display_username = document.createTextNode(user.username);
var display_date = document.createTextNode(user.date);
var display_comments = document.createTextNode(user.comments);
newName.appendChild(display_username);
newDate.appendChild(display_date);
newMessage.appendChild(display_comments);
newUser.appendChild(newName);
newUser.appendChild(newDate);
newUser.appendChild(newMessage);
newUser.appendChild(newIcon);
output.appendChild(newUser);
console.log(data);
}).catch(function(error) {
console.log(error)
})
Теперь это результат, который я получаю: ![enter image description here](https://i.stack.imgur.com/HZCyG.png)
Here's the before and after pics next to each other:
Just html and css:
![enter image description here](https://i.stack.imgur.com/CHefH.png)
Html, css, and js:
введите описание изображения здесь
Этот потрясающий значок шрифта должен быть встроен в имя пользователя и дату, как указано в CSS, но он исчезает из окна, когда я использую js.
Похоже как класс p, также влияет на мой класс i. Не знаю почему.
В коде js вот конкретная часть c, на которую нужно обратить внимание, в отношении класса i и, возможно, также класс p:
js:
var newUser = document.createElement("div");
var newName = document.createElement("h6");
var newDate = document.createElement("h6");
var newMessage = document.createElement("p");
var newIcon = document.createElement("i");
newUser.className = 'output';
newName.className = 'username';
newDate.className = 'date';
newIcon.setAttribute("class", "fas fa-ellipsis-v icon");
newMessage.className = 'comments';
var display_username = document.createTextNode(user.username);
var display_date = document.createTextNode(user.date);
var display_comments = document.createTextNode(user.comments);
newName.appendChild(display_username);
newDate.appendChild(display_date);
newMessage.appendChild(display_comments);
newUser.appendChild(newName);
newUser.appendChild(newDate);
newUser.appendChild(newMessage);
newUser.appendChild(newIcon);
output.appendChild(newUser);
Надеюсь, я достаточно ясно сформулировал этот вопрос. Не могу понять, что делаю не так. Заранее спасибо. Я все еще новичок в этом. Приветствуется любая помощь.
Примечание. Этот вопрос был изменен по сравнению с предыдущим, чтобы лучше проиллюстрировать проблему, поэтому некоторые комментарии взяты из исходного вопроса.