javaScriptでtextContentをカンマ区切りに書き換えたい

Question

javaScript, jspの初心者です。
サーブレットでセットした値をjsp側でカンマ区切りで表示したい。最初はtaglibのfmtを使おうとしたのだが、諸事情で使えなくなったので代用案でtoLocaleString()を使うことにしました。しかし、表示が反映されませんでした。

<div id="str">10000</div>

<script>
   document.getElementById("str").textContent=Number(textContent).toLocaleString();
</script>

###試したこと

<div id="str">10000</div>

<script>
   document.getElementById("str").textContent="1,000";
</script>

この場合はしっかりと変わってくれました。しかし、「""」で囲わないと表示が「1」になってしまいました。
※1つのみを変えることは解答者様のおかげでできました。

追記

<c:forEach var="product" items="${productList}">

				<li><a href="ProductListSelect?productId=${product.product_id}">
						<img src="${product.firstImage}" align="top">
						<p>${product.product_name}</p> 内容量：${product.product_contents}kg<br>
						<font>${product.product_price}</font>
				</a></li>
			</c:forEach>

上のプログラムのように、繰り返し処理で<font>${product.product_price}</font>に対して常にカンマを付ける処理ではどうすればよいでしょうか？
名前の通り金額が入っていて1000だと見にくいので1,000と変えたいです。

Answer 1

単にtextContentでは、何を指しているのかわかりません。

document.getElementById("str").textContent=Number(document.getElementById("str").textContent).toLocaleString();

しかし、「""」で囲わないと表示が「1」になってしまいました。

document.getElementById("str").textContent=1,000;と書いた場合、``document.getElementById("str").textContent=1のあとに000`という式を解釈するような処理となります。

Comments

[takuson]

ありがとうございます。
例えばですが、カンマを付けたいものが2つあった場合にはどのようにすればよいでしょうか？
今はidをもとに変更していると思うのですが、その場合1つ目のものにしか対応できないと思うのですが…
言葉だけでは伝わりにくいと思うので、質問内容に追加します。

Answer 2

<div id="str">10000</div>
<script>
var ele;
(ele=document.querySelector("#str")).textContent=Number(ele.textContent).toLocaleString();
</script>