HTMLでJSコンテンツを置き換える？

Question

.bio__content h4のテキストをJSファイルで作成したnewLinksのコンテンツに置き換えようとしています。

私は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関数は、別の値を持つ文字列内の特定の値を置換する文字列関数です。 javascriptを使用してドキュメントにHTMLを追加するために使用する関数は$.html()です。また、すべてのリンクを1つの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>