Замена содержимого JS в HTML?

Question

Я пытаюсь заменить текст .bio__content h4 содержимым newLinks, которое я создал в своем JS-файле.

Я пытаюсь использовать функцию forEach для отображения newLinks на странице, но она не работает для меня. Я не уверен, что я делаю неправильно, я хочу заменить содержимое .bio__content h4 на newLinks, поэтому я использовал функцию replace().

Это не так?

HTML

<div class="bio__content"> 
    <h1 itemprop="name">Name</h1> 
     <div> 
      <h4><%- profile.designations %></h4> 
     </div> 
    <div> 

JS

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

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

newLinks.forEach(function (e) { 
    $(".bio__content").text().replace(".bio__content h4", e); 
}); 

Answer 1

replace функция является функцией строка, которая заменяет определенное значение в строке с другим значением. Функция, которую вы должны использовать для добавления html в документ с помощью javascript, - $.html(). Кроме того, было бы проще, если бы вы присоединились ко всем ссылкам в одну строку html с join function и добавили ее в документ.

var designation = //JSContext.profile.designations.split(", "); 
 
      designation = ['CAP', 'AEA', 'AAA'] 
 
      
 
      var newLinks = designation.map(function(x) { 
 
      return "<a class='modal'>" + x + "</a>" }); 
 
      // newLinks = ["<a class='hey'>CAP</a>", "<a class='hey'>AEA</a>", "<a class='hey'>AAA</a>"] 
 
      
 
      var linksString = newLinks.join("\n"); 
 
      $(".bio__content h4").html(linksString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bio__content"> 
 
      <h1 itemprop="name">Name</h1> 
 
       <div> 
 
        <h4><%- profile.designations %></h4> 
 
       </div> 
 
      <div>