javascript - 替换HTML中的JS内容？

Question

我正在尝试将 .bio__content h4 文本替换为我在 JS 文件中创建的 newLinks 内容。

我正在尝试使用 forEach 函数将 newLinks 显示到页面，但它对我不起作用。我不确定我做错了什么，我想用 newLinks 替换 .bio__content h4 内容，所以我使用了 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 function 是一个字符串函数，它将字符串中的某个值替换为另一个值。您应该使用 javascript 将 html 添加到文档的函数是 $.html() 。另外，如果您使用 join function 将所有链接加入到一个 html 字符串中，会更容易。并将其添加到文档中。

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>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
</div>
</div>