我如何用javascript添加一个span到h3元素

Question

我正在进行聊天，我想添加一个头像图片功能，所以我认为它可能与span工作得很好，但问题是我不知道如何将span添加到元素。

let avatar = document.createElement("span");
let userMessage = document.createElement("H3");
avatar.setAttribute(userMessage);
userMessage.innerHTML = username + ": " + message;
//document.getElementById("chat").appendChild(avatar);
document.getElementById("chat").appendChild(userMessage);
userMessage.style.background = color;
userMessage.style.textAlign = "left";
document.getElementById("msg").value = "";

Answer 1

我假设您有divid="chat">然后在span中加上h3标签然后再加上div标签这样你的代码就会像这样

var username="zulqarnain jalil";
var message ="welcome back, have a nice day";
var color='lightgrey';  
var avatar = document.createElement("span");
var userMessage = document.createElement("h3");
userMessage.innerHTML = username + ": " + message;
userMessage.style.background = color;
userMessage.style.textAlign = "left";
avatar.appendChild(userMessage);
document.getElementById("chat").appendChild(avatar);
//document.getElementById("msg").value = "";

<div id="chat">
</div>

我已经为您创建了一个聊天机器人代码片段，您可以在这里测试它

var username="zulqarnain jalil";
function sendMessage()
{
var message =document.getElementById('messagebox').value;
if(message)
{
document.getElementById('messagebox').value='';
var color='lightgrey';  
var avatar = document.createElement("span");
var userMessage = document.createElement("h3");
userMessage.innerHTML = username + ": " + message;
userMessage.style.background = color;
userMessage.style.textAlign = "left";
avatar.appendChild(userMessage);
document.getElementById("chat").appendChild(avatar);
}
else
{
// message empty
}

}
//document.getElementById("msg").value = "";

<div id="chatBox">
<div id="chat">
</div>
<div>
<input type="text"  id="messagebox" />
<input type="button" onclick="sendMessage()" value="Send" />
</div>
</div>

Answer 2

首先您需要添加span作为H3元素的子元素。

我认为解决这个问题的最好方法是创建一个类Message。初始化该类会创建h3和span，它们的唯一id存储在变量id中，以备将来使用。该类还将添加h3作为其父元素的子元素(无论它是什么)，并将span作为h3元素的子元素。

var counterText = 0;
var counterAvatar = 0;
class UserMessage {
constructor(msgTxt, avatar){
// This block initializes the text message of the user
// It will also add an id to the tag for future use
let msgTxt = document.createTextNode(msgTxt);

this.messageID = 'text' + counterText;
this.message = document.createElement('h3');
this.message.appendChild(msgTxt);
this.message.setAttribute('id', this.messageID);
counterText++;
// This block creates an img element with the attributes src and id
this.avatarID = 'avatar' + counterAvatar;
this.avatar = document.createElement('img');
this.avatar.setAttribute('src', avatar);
this.avatar.setAttribute('id', this.avatarID);
counterAvatar++;
// This block appends the avatar element to the text and the text to the 
// chat div.
let chat = document.getElementById('chat');
this.message.appendChild(this.avatar);
chat.appendChild(this.message);
}
}

初始化一个新实例:

var message = new UserMessage("Hello, this is a text message!",'<path/to/avatar>')

这是一个面向对象的方法

你也可以把头像附加到消息中，把消息附加到聊天中。但我认为以面向对象的方式解决问题要好得多，因为它将在未来更新应用程序时节省时间。

Answer 3

Markdown worksfine在这里。块级HTML元素有一些限制:

必须用空行与周围的文本隔开。最外层块元素的开始和结束标记不能缩进。不能在HTML块中使用降价。