如何使用 .innerHTML 添加 html 标签？

【问题标题】：How can I add html tags using .innerHTML?如何使用 .innerHTML 添加 html 标签？
【发布时间】：2018-07-24 01:36:38
【问题描述】：

我有一个想要更新 innerhtml 文本和图标的元素，但我的标签被忽略了。

 document.getElementById("nextBtn").innerHTML = "Next
 <i class="icon icon--right icon-arrow-right"></i>";
}

【问题讨论】：

用单引号替换 HTML 字符串的外部双引号。
"Next " 应该是'Next '

标签： javascript html dom tags innerhtml

【解决方案1】：

您需要将字符串中的内部双引号" 转义，或者将外部引号更改为单引号'；例子：

document.getElementById("nextBtn").innerHTML = "Next <i class=\"icon icon--right icon-arrow-right\"></i>";

document.getElementById("nextBtn").innerHTML = 'Next <i class="icon icon--right icon-arrow-right"></i>';

【讨论】：

【解决方案2】：

您的 HTML 字符串应格式化，使用单引号而不是双引号。

当前是：

 document.getElementById("nextBtn").innerHTML = "Next
 <i class="icon icon--right icon-arrow-right"></i>";

改为：

document.getElementById("nextBtn").innerHTML = 'Next<i class = "icon icon--right icon-arrow-right" ></i>';

【讨论】：

【解决方案3】：

你必须用单引号代替双引号

document.getElementById("nextBtn").innerHTML = 'Next<i class = "icon icon--right icon-arrow-right" ></i>';

【讨论】：