Replacing JS content in HTML?
<p>I'm trying to replace the <code>.bio__content h4</code> text with the <code>newLinks</code> content I created in my JS file. </p>

<p>I'm trying to use the <code>forEach</code> function to display the <code>newLinks</code> to the page but it's not working for me. I'm not sure what I'm doing wrong, I want to replace the the <code>.bio__content h4</code> content with <code>newLinks</code>, so I used the <code>replace()</code> function. </p>

<p>Is this not right? </p>

<p>HTML</p>

<pre><code> &lt;div class="bio__content"&gt;
     &lt;h1 itemprop="name"&gt;Name&lt;/h1&gt;
        &lt;div&gt;
           &lt;h4&gt;&lt;%- profile.designations %&gt;&lt;/h4&gt;
         &lt;/div&gt;
  &lt;div&gt;
</code></pre>

<p>JS </p>

<pre><code>var designation = JSContext.profile.designations.split(", ");
// designation = ['CAP', 'AEA', 'AAA']

var newLinks = designation.map(function(x) {
return "&lt;a class='modal'&gt;" + x + "&lt;/a&gt;" });
// newLinks = ["&lt;a class='hey'&gt;CAP&lt;/a&gt;", "&lt;a class='hey'&gt;AEA&lt;/a&gt;", "&lt;a class='hey'&gt;AAA&lt;/a&gt;"]

newLinks.forEach(function (e) {
  $(".bio__content").text().replace(".bio__content h4", e);
});
</code></pre>