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
– Lucian, Commented May 17, 2018 at 15:45

muecas · Accepted Answer · 2018-05-17 15:44:35Z

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, 2018 at 15:44

muecas

4,3251 gold badge10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucian Over a year ago

thank you, this helped. I now feel so dumb. i tried adding innerHTML after the value. Thank you so much

muecas Over a year ago

@Lucian great! Glad i could help. Tick it if it helped :)

barro32 · Accepted Answer · 2018-05-17 15:44:13Z

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, 2018 at 15:44

barro32

2,71825 silver badges38 bronze badges

Comments

score 2 · Accepted Answer · 2021-07-03 08:30:07Z

2

Did you try this solution?

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

edited Jul 3, 2021 at 8:30

answered May 17, 2018 at 15:43

user9760669

Collectives™ on Stack Overflow

Add HTML element inside JS variable

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related