求助:如何在JavaScript代码中插入HTML div标签,解决标签显示为纯文本问题
解决JavaScript中HTML标签被解析为纯文本的问题
你遇到的问题根源是**innerText会将所有内容作为纯文本渲染**,所以拼接的<div>标签不会被浏览器解析为HTML元素。这里提供两种可行的解决方法:
方法1:使用innerHTML替代innerText
innerHTML允许你直接设置元素的HTML内容,浏览器会自动解析其中的标签:
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; } // 替换innerText为innerHTML,直接拼接HTML字符串 button.innerHTML = (typeof this.config.startBtnName === 'string') ? `<div>${this.config.startBtnName}</div>` : `<div>${this.local("test")}</div>`;
方法2:创建独立div元素挂载(更安全)
如果this.config.startBtnName可能包含用户输入,直接用innerHTML存在XSS风险,推荐用创建元素的方式:
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; } // 创建包裹文本的div元素 const textWrap = this.createElement("div"); textWrap.textContent = (typeof this.config.startBtnName === 'string') ? this.config.startBtnName : this.local("test"); // 将div挂载到button上 button.appendChild(textWrap);
内容的提问来源于stack exchange,提问作者pavel
相关产品推荐
相关产品推荐

