Add HTML element inside JS variable

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);
});

in the line output[textContent] = value + 'mm'; I need the output as value + '<span class="classname">mm</span>' I tried most of the things and did a lot of research but no luck so far.

This might be something very simple but I am too new to JavaScript so couldn't figure it out.

@Mamun this won't work. it gives the whole tag as string and shows as it is — Lucian, May 17 '18 at 15:45

score 4 · Accepted Answer · answered May 17 '18 at 15:44

4

You should change this line:

output[textContent] = value + 'mm';

to:

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

Also, you could remove the IE8 fallback, as it will not be necessary. All browsers have support for innerHTML.

In your code you are assigning the node text and not the node HTML as you should.

You can read more about the difference between innerText and innerHTML here.

answered May 17 '18 at 15:44

muecas

4,265
1
8
18

thank you, this helped. I now feel so dumb. i tried adding innerHTML after the value. Thank you so much – Lucian May 17 '18 at 15:51
@Lucian great! Glad i could help. Tick it if it helped :) – muecas May 17 '18 at 15:52

score 2 · Answer 2 · 2021-07-03T08:30:07.307

2

Did you try this solution?

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

edited Jul 03 '21 at 08:30

answered May 17 '18 at 15:43

score 2 · Answer 3 · answered May 17 '18 at 15:44

2

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

textContent and innerText are both functions for adding text to an element you want to use innerHTML to add HTML.

Like this:

ouput.innerHTML = ...;

answered May 17 '18 at 15:44

barro32

2,559
23
36

Add HTML element inside JS variable

3 Answers3