Tenga en cuenta que esta pregunta ya tiene una respuesta aquí, pero la respuesta se proporciona en jQuery, necesito que se haga algo similar con vanilla javascript.
Aquí está mi problema en detalle. Tengo una cadena de precios para mostrar en una página que estará en html como <span>60.00</span> Quiero transformar la cadena en algo como esto <span>60,<sup>00</sup></span> .
Aquí está el código que he probado.
let value = "60.00"; value = value.replace(".", ","); let values = value.split(','); var tag = document.createElement("sup"); var text = document.createTextNode(values[1]); text = tag.appendChild(text); let text1 = JSON.stringify(text); alert(values[0]+text1); Si ejecuto este código, obtengo 60{} como resultado. 60,⁰⁰ esta es la salida deseada.
Ya casi llega con su código actual, pero está concatenando objetos y cadenas. Eso no funciona. Debe completar los elementos uno por uno o convertir los elementos HTML en cadenas con .outerHTML :
let value = "60.00"; value = value.replace(".", ","); let values = value.split(','); var tag = document.createElement("sup"); var text = document.createTextNode(values[1]); tag.appendChild(text); document.getElementById('output').innerHTML = values[0]; document.getElementById('output').appendChild(tag); alert(values[0] + tag.outerHTML); <div id="output"></div>En lugar de agregar una etiqueta sup , ¿por qué no agregar la cadena <sup></sup> ?
let span = document.querySelector("span"); let value = span.innerHTML; const sup = `<sup>${value.split('.')[1]}</sup>`; value = `${value.split('.')[0]},${sup}`; span.innerHTML = value; <span>60.00</span> let span = document.querySelector("span"); let value = span.innerHTML; const sup = `<sup>${value.split('.')[1]}</sup>`; value = `${value.split('.')[0]}.${sup}`; span.innerHTML = value; <span>10.00</span>