javascript：在最后两个字符周围添加span

我需要在div中的最后两个字符周围加一个空格

当前结构如下所示：

<div id="price">3199</div>

<div id="price">31<span id="smaller">99</span></div>

3199

我需要输出如下内容：

<div id="price">3199</div>

<div id="price">31<span id="smaller">99</span></div>

3199

这是一个价格在动态HTML5横幅广告。我需要的能力，格式的最后两个字符小于前两个，但从动态饲料的整数只是3199或2099等

我已经找到了一些jQuery解决方案，但我需要它是纯JavaScript

用jQuery很好地解决了这个问题，我确信没有jQuery它不需要太多的调整，但我的javascript技能无法完全破解它。

您可以将与regex一起使用

var ele=document.getElementById（'price'）；
ele.innerHTML=ele.innerHTML.replace（/.{2}$/，'$&'）

#更小{
字体大小：10px；
}

3199

您可以将与regex一起使用

var ele=document.getElementById（'price'）；
ele.innerHTML=ele.innerHTML.replace（/.{2}$/，'$&'）

#更小{
字体大小：10px；
}

---

3199

例如，使用

子字符串

，虽然不如正则表达式好，但很有效

var str=document.getElementById（'price'）.innerHTML；
剪切=str.substring（str.length，2）；
document.getElementById（'price'）.innerHTML=str.slice（0，-2）+''+cut+''
#更小{
字体大小：10px；
}
3199
例如，使用
子字符串
，虽然不如正则表达式好，但很有效


var str=document.getElementById（'price'）.innerHTML；
剪切=str.substring（str.length，2）；
document.getElementById（'price'）.innerHTML=str.slice（0，-2）+''+cut+''
#更小{
字体大小：10px；
}
3199
使用
slice
功能编辑
innerHTML

这是最干净的方法

var ele=document.getElementById('price');
ele.innerHTML = ele.innerHTML.slice(0, 2) + "<span id='smaller'>" + ele.innerHTML.slice(2) + "</span>";

var ele=document.getElementById（'price'）；
ele.innerHTML=ele.innerHTML.slice（0，2）+“”+ele.innerHTML.slice（2）+“”；
使用
slice
函数编辑
innerHTML

这是最干净的方法

var ele=document.getElementById('price');
ele.innerHTML = ele.innerHTML.slice(0, 2) + "<span id='smaller'>" + ele.innerHTML.slice(2) + "</span>";

var ele=document.getElementById（'price'）；
ele.innerHTML=ele.innerHTML.slice（0，2）+“”+ele.innerHTML.slice（2）+“”；
如果您在该HTML上已经有了事件处理程序，那么您不能仅仅重置
innerHTML
，您必须使用DOM操作来更简单地拆分文本节点


var priceNode=document.getElementById（'price'）；
var textNode=priceNode.firstChild；
var newTextNode=textNode.splitText（textNode.data.length-2）；//断开文本节点位置的索引
var span=document.createElement（'span'）；
span.className='decimal'；
appendChild（newTextNode）；
priceNode.appendChild（span）
.decimal{
字体大小：50%；
}
3199
如果您在该HTML上已经有了事件处理程序，那么您不能仅仅重置
innerHTML
，您必须使用DOM操作来更简单地分解文本节点


var priceNode=document.getElementById（'price'）；
var textNode=priceNode.firstChild；
var newTextNode=textNode.splitText（textNode.data.length-2）；//断开文本节点位置的索引
var span=document.createElement（'span'）；
span.className='decimal'；
appendChild（newTextNode）；
priceNode.appendChild（span）
.decimal{
字体大小：50%；
}
3199
您尝试过什么吗？刚刚更新了问题，加入了jquery Fiddle请参见jsfiddle:@jeff Fiddle脚本不起作用？
id=small
不是语义。更好的选择是
class=“decimal”
您尝试过什么吗？只是更新了问题以包含jquery Fiddle请参见jsfiddle:@jeff Fiddle脚本不起作用？
id=small
不是语义。一个更好的选择是
class=“decimal”
，由于这个简单的例子，这种方法在这种情况下有效。但是，如果您对该HTML应用了任何处理程序，它们将丢失（孤立）。请参阅我的答案，了解一个解决方案，该解决方案不会影响已设置的处理程序，因此可以使用它而不用担心是，例如：
2499
。您在
wholeamount
上有一个处理程序。（将鼠标移到24上）显示我的解决方案不会破坏现有的handlerPranav，我知道这不是问题，我只是不希望人们盲目使用你的解决方案，因为有些情况下它不起作用。这是一种适用于高度控制的情况的黑客，但你需要小心。代码总是在演变，这可能会在将来导致问题。这个解决方案对我来说最有效，但下面的@JuanMendes答案在不同的情况下值得考虑。在这种情况下，这是因为有一个简单的示例。但是，如果您对该HTML应用了任何处理程序，它们将丢失（孤立）。请参阅我的答案，了解一个解决方案，该解决方案不会影响已设置的处理程序，因此可以使用它而不用担心是，例如：
2499
。您在
wholeamount
上有一个处理程序。（将鼠标移到24上）显示我的解决方案不会破坏现有的handlerPranav，我知道这不是问题，我只是不希望人们盲目使用你的解决方案，因为有些情况下它不起作用。这是一种适用于高度控制的情况的黑客，但你需要小心。代码总是在演变，这可能会在将来导致问题。这个解决方案对我来说效果最好，但是@JuanMendes下面的答案在不同的情况下值得考虑。