如何使用 javascript 向 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

我假设您有id="chat"的 div 并且您想要 append 一个跨度中的h3标签，然后 append 聊天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元素的子元素。

我认为解决此问题的最佳方法是创建 class Message 。 初始化 class 会创建h3和span ，并将唯一 id 存储在变量id中以供将来使用。 class 还将添加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>')

这是一个面向 object 的方法。

你也可以只是 append 头像到消息和聊天消息。 但我认为以 object 为导向的方式解决问题要好得多，因为它将在您更新应用程序时节省时间。

Answer 3

Markdown 在这里工作正常。 块级 HTML 元素有一些限制：

它们必须用空行与周围的文本隔开。 最外面的块元素的开始和结束标签不能缩进。 Markdown 不能在 HTML 块中使用。