在JS变量

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之间的区别。

Answer 2

您尝试过那些解决方案吗？

output.innerHTML = `${value} <span class="my-class">mm</span>`;

Answer 3

var textContent = ('textContent' in document) ? 'textContent' : 'innerText';

textContent和innerText都是将文字添加到您要使用innerHTML添加HTML的元素的功能。

像这样：

ouput.innerHTML = ...;