如何在JavaScript代码中插入HTML div标签？

Question

请帮我在脚本中添加html div标签 `

const button = this.createElement("div");
        button.classList.add("start_button");
        let border = 0;
        if (typeof this.config.backgroundImg === "string"){
            button.classList.add("button");
            border = 1;
        }
        button.innerText = (typeof this.config.startBtnName === 'string') ? this.config.startBtnName : this.local("test");

` this.config.startBtnName 是一个文本，我需要这个文本在里面 < div >

我尝试了这个

'<div>'+this.config.startBtnName+'</div>'

，但是div以纯文本形式输出，而不是html标签。

Answer 1

要将 HTML 内容（包括

div

标签）插入到 JavaScript 创建的元素中，您应该使用

innerHTML

属性而不是

innerText

。

innerText

属性将指定的值视为纯文本，并且不会将其解析为 HTML。但是，

innerHTML

会将分配的值视为 HTML，允许您插入像

div

这样的标签。

以下是修改代码以包含

div

标签的方法：

const button = this.createElement("div");
button.classList.add("start_button");
let border = 0;

if (typeof this.config.backgroundImg === "string"){
    button.classList.add("button");
    border = 1;
}

// Using innerHTML to insert div tag
button.innerHTML = (typeof this.config.startBtnName === 'string') 
    ? '<div>' + this.config.startBtnName + '</div>' 
    : '<div>' + this.local("test") + '</div>';

在这段代码中，

innerHTML

用于设置按钮的内容。如果

this.config.startBtnName

是字符串，则会将该字符串包装在

div

标签中。否则，它会回退到使用

this.local("test")

的结果，也包含在

div

标签中。

请确保

this.config.startBtnName

和

this.local("test")

的返回值（如果可以包含用户输入）经过适当清理，以避免潜在的安全风险，例如跨站脚本 (XSS)。