Replacing a specific word within div after it being applied

April 11, 2023

I have got a div

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
            <div class="div">
              <div class="subdiv">
                <p>${Groups[0].Names[0].Nickname}</p>
              </div>
            </div>
            <div class="div">
              <div class="subdiv">
                <p>${Groups[0].Names[1].Nickname}</p>
              </div>
            </div>
</html>

My goal is to replace "Nickname" with "Coolname" for each div after clicking a button, however the page loads up with Nickname by default and if I execute jquery $('#subdiv p').text((i, t) => t.replace('Nickname', 'Coolname')); it doesn’t actually see "Nickname" but the output itself. Is there any simple workaround? preferably without jquery. I simply need to change Nickname with Coolname and then display it again as Groups[0].Names[0].Coolname

>Solution :

Obviously you are using a template engine in the backend. jQuery in the frontend does not know "Coolname" after rendering the HTML page. But you can specify this value in a data attribute and let jQuery access it.

In this example, nickname and coolname are not changed, but you could implement it like this or similar:

$('#change').on('click', function() {
  $('[data-coolname]').each(function() {
    $(this).html($(this).attr('data-coolname'));
  });
});

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div class="div">
    <div class="subdiv">
      <p data-coolname="${Groups[0].Names[0].Coolname}">${Groups[0].Names[0].Nickname}</p>
    </div>
  </div>
  <div class="div">
    <div class="subdiv">
       <p data-coolname="${Groups[0].Names[1].Coolname}">${Groups[0].Names[1].Nickname}</p>
    </div>
  </div>
  <button id="change">change</button>
</body>
</html>