当我使用insertAdjacentHTML时，会出现神秘的字符(“beforeend”...向DOM添加元素

Question

我是javascript和php的新手，我已经解决这个问题好几个小时了，但都没有成功。

我在一个网页上创建一个列表，其中的列表项是从数据库中检索出来的。创建列表的php代码如下所示：

$options = get_option( 'psb_config' );
$n = 0;
echo '<ul id="session-type-list">';
foreach ( $options['type'] as $t ) {
    $html = '<li id="' . $t . '-field"><input id="' . $t . '-psb" type="text" class="type-btn" size="20%" value="' . $t . '" name="psb_config[type][' . $n . ']">';
    $html .= '<input type="button" class="button" value="remove" onclick="removeTypeButton(&#34' . $t . '-field&#34)"></li>';
    echo $html;
    $n++;
}
echo '</ul>';

该列表中的每个条目都有一个文本输入字段和一个带有onClick函数调用onclick="removeTypeButton(&#34' . $t . '-field&#34)">的remove按钮。removeTypeButton()函数是一个简单的javascript：

function removeTypeButton( id ) {
    document.getElementById( id ).remove();
}

它工作得很好。

我还希望用户能够将字段添加到列表中，并且在列表的末尾有一个add Session按钮，它调用以下javascript函数：

function addTypeButton( n ) {
    var node = document.getElementById("session-type-list");
    var id = '\"field-' + n + '\"';
    var html = '<li id=' + id + '>';
    html += '<input id="psb-' + n + '" type="text" class="type-btn" size="20%" placeholder="new shoot type" name="psb_config[type][' + n + ']">';
    html += '<input id="btn-' + n + '" type="button" class="button" value="remove" onClick="removeTypeButton(' + id  + ')"></li>';
    node.insertAdjacentHTML("beforeend", html);
}

此函数通常按预期工作，但有一个例外:在插入文本字段和<ul>列表末尾的remove按钮后，remove按钮的HTML将变得混乱。

我的HTML字符串是：

<input id="btn-' + n + '" type="button" class="button" value="remove" onClick="removeTypeButton(' + id  + ')"></li>

当我在浏览器中检查元素时，字符串看起来像这样：

<input id="btn-10" type="button" class="button" value="remove" onclick="removeTypeButton(" field-10")"="">

removeTypeButton(" field-10")"="">参数搞砸了！还有额外的引号和等号。

我一直试图摆脱引号和其他恶作剧，包括jQuery，但没有成功。字符串似乎被解释为好像onClick函数在(之后结束，而参数被解释为另一个标记。

所以我的问题是:我做错了什么？我已经用谷歌搜索了几个小时了，stackoverflow是我最后的选择。

任何提示都是非常感谢的。

Answer 1

如果您查看页面源代码，而不是检查元素，您会发现结果如下所示

onClick="removeTypeButton("field-10")">

双引号中的双引号可能会使浏览器感到困惑。将内部引号转换为单引号。

var id = '\'field-' + n + '\'';

这应该具有预期的效果：

onClick="removeTypeButton('field-10')">