javascript - 如何使用 javascript 更改引导卡 header 值？

Question

我有一个 ejs(html) 文件，并且有一个名为“card”的 div 类。 我想做的是，如果我点击按钮(“点击我”)， 卡头(header1)必须用彩色背景更改(之前-->之后)。 但是，当我单击该按钮时，仅更改了背景颜色(不包括标题)。需要你的帮助。

     function save() {
        var x = document.getElementById("header1");
        x.style.backgroundColor="#cfe8f9";
        x.setAttribute("value", "After");
    }

     <div class="col-sm-6">
            <div class="card">
              <div class="card-header" id="header1" style="font-weight:bold;">before</div>
              <div class="card-body">
                <form action="" method="POST">
                  <input type="hidden" id="input_flag" value="">
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">noID</span>
                      </div>
                      <input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
                      <div class="input-group-append">
                        <span class="input-group-text">
                          <i class="fa fa-sort-numeric-asc"></i>
                        </span>
                       ...
                       ...
                       ...
      <button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
     </div> //end of col-sm-6

Answer 1

更新innerHTML

function save() {
        var x = document.getElementById("header1");
        x.style.backgroundColor="#cfe8f9";
        x.innerHTML = "After";
    }

<div class="col-sm-6">
            <div class="card">
              <div class="card-header" id="header1" style="font-weight:bold;">before</div>
              <div class="card-body">
                <form action="" method="POST">
                  <input type="hidden" id="input_flag" value="">
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">noID</span>
                      </div>
                      <input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
                      <div class="input-group-append">
                        <span class="input-group-text">
                          <i class="fa fa-sort-numeric-asc"></i>
                        </span>
                       ...
                       ...
                       ...
      <button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
     </div> //end of col-sm-6