HTML要素の内容をJavaScriptから書き換える

HTMLの要素の内容（中身）をJavaScriptから変更するメモです。

作例
要素の内容を変更
参考文献

作例

HTMLの数字部分をJavaScriptから変更したい。

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="slider.css">
  </head>
  <body>
    <div class="box">
      <div class="slider">
        <input type="range" id="slider_1" min="0" max="10" value="5" />
      </div>
      <div id="sValue">
        5
      </div>
    </div>
    <script type="text/javascript" src="slider.js"></script>
  </body>
</html>

JavaScript

const slider = document.getElementById("slider_1");
const sValue = document.getElementById("sValue");
slider.addEventListener("input", (e)=>{
  sValue.innerHTML = e.target.value;
});

CSS

*{
  margin: 0;
  padding: 0;
}
html,body{
  height: 100%;
  display: grid;
  place-items: center;
  background: #f1f1f1;
}
.box{
  background: white;
  padding: 20px 20px 20px 30px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
}
.box .slider{
  height: 40px;
  width: 300px;
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.box .slider input{
  height: 10px;
  width: 100%;
  -webkit-appearance: none;
  outline: none;
  background: #f2f2f2;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
}
.box .slider input::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #52a7e0;
  border-radius: 50%;
  border: 2px solid #f2f2f2;
}
.box #sValue{
  width: 40px;
  font-size: 30px;
  font-weight: 600;
  color: #52a7e0;
}

要素の内容を変更

id=”slider_1″の値を受け取り、id=”sValue”の値を

const content = element.innerHTML;
element.innerHTML = htmlString;

を用いて書き換えました。

const slider = document.getElementById("slider_1");
const sValue = document.getElementById("sValue");
slider.addEventListener("input", (e)=>{
  sValue.innerHTML = e.target.value;
});