Javascript 添加新的动态增强卡不起作用

我将在我的页面中插入新的boostrap卡。我的问题是，我没有成功地在我的内容中包含一张新卡片。 当我单击“插入”时，卡不会显示

暗中

如果存在记录，则显示新的boostrap卡

                  <div class="row">
                    <button type="button" class="btn btn-primary" aria-label="Insert"  id="insert">
                      <span aria-hidden="true">Insert</span>
                    </button>
                  </div>
                  <div class="row">
                    <ul class="row list-unstyled" id="list">
<?php
  $i = 0;

  while ($QoptionValue->fetch()) {
.....
?>
                      <li class="col-md-4" id="element'<?php echo $i; ?>">
                        <div class="card">
                          <h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
                          <div class="card-body">
                            <div class="card-text">
                              <div><?php ..... ?></div>
                          </div>
                        </div>
                      </li>
<?php
    $i++;
  }
?>
                    </ul>
  </div>

插入

$（'#insert'）。单击（函数（）{
$（“ul列表”）。追加（“”）；
});
$（'.close'）。单击（函数（）{
var$target=$（this.parents（'li'）；
$target.hide（'slow'，function（）{$target.remove（）；}）；
})

控制台错误

这条线上似乎有个问题：

                $( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");


Uncaught SyntaxError: missing ) after argument list

$（“ul列表”）.append（“
suppliernom de la valeurOrdre de tri“）；
参数列表后未捕获的语法错误（缺少）

最好使用

json\u encode（）

将任何PHP变量传递给javascript。使用

json\u encode（）

您将始终获得一个格式正确的JavaScript对象，其中包含转义引号

<script>
    $('#insert').click(function(){
        $( "ul#list" ).append(<?php echo json_encode($card); ?>);
    });
</script>

$（'#insert'）。单击（函数（）{
$（“ul#list”）.append（）；
});

我想你需要避开quotesquotes？你能解释一下什么具体不起作用吗？什么错误/行为？当我单击“插入”按钮时，不会添加新卡。您需要提供有关错误的更多信息。点击事件是否触发？是否存在控制台错误？请参见上文我添加了元素可能pb为“”。它补充说。

<script>
    $('#insert').click(function(){
        $( "ul#list" ).append(<?php echo json_encode($card); ?>);
    });
</script>