javascript - 在 JS 变量中添加 HTML 元素

Question

var $document = $(document);
var selector = '[data-rangeslider]';
var $element = $(selector);
// For ie8 support
var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
// Example functionality to demonstrate a value feedback
function valueOutput(element) {
    var value = element.value;
    var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
    output[textContent] = value + 'mm';
}
$document.on('input', 'input[type="range"], ' + selector, function(e) {
    valueOutput(e.target);
});

在行 output[textContent] = value + 'mm';我需要输出为 value + '<span class="classname">mm</span>' 我尝试了大部分事情并做了很多研究，但到目前为止还没有运气。

这可能是非常简单的事情，但我对 JavaScript 太陌生，所以无法弄清楚。

Answer 1

您应该更改此行:

output[textContent] = value + 'mm';

至:

output.innerHTML = value + '<span>mm</span>';

此外，您可以删除 IE8 后备，因为没有必要。所有浏览器都支持 innerHTML。

在您的代码中，您分配的是节点文本，而不是您应该分配的节点 HTML。

您可以阅读有关 innerText 和 innerHTML 之间差异的更多信息 here .