如何使用 javascript 向 h3 元素添加跨度答案

【问题标题】：How can I add a span to h3 Element with javascript如何使用 javascript 向 h3 元素添加跨度
【发布时间】：2021-04-30 01:12:11
【问题描述】：

我正在聊天，我想添加头像图片功能，所以我认为它可能适用于 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 = "";

【问题讨论】：

你能澄清一下你需要span的元素吗？另外，注释掉的代码对你有用吗？
您在上面的代码中使用了appendChild 将h3 附加到#chat 元素。只需对您的 span 执行相同操作即可将其附加到 h3 元素。
旁注：设置h3的style before 附加它（只需将两行设置style属性移动到appendChild调用上方）。最好在将元素放入 DOM 之前将其置于您想要的状态。
你能用 sn-p 添加预期的 html 结果吗？

标签： javascript html css web let

【解决方案1】：

我假设您有带有 id="chat" 的 div，并且您想在跨度中附加一个 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>

我为你创建了一个聊天机器人sn-p，你可以在这里测试一下

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>

【讨论】：

@OP 希望将span 添加到h3 元素中——反之亦然

【解决方案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>')

这是一种面向对象的方法。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：