时间戳

首页 > 解决方案 > 当我使用 insertAdjacentHTML("beforeend" ... 向 DOM 添加元素时出现神秘字符

javascript - 当我使用 insertAdjacentHTML("beforeend" ... 向 DOM 添加元素时出现神秘字符

问题描述

我对 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)">。该removeTypeButton()函数是一个简单的javascript：

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

它工作正常。

我还希望用户能够将字段添加到列表中，并且在列表末尾有一个添加会话按钮，它调用以下 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>的 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 是我最后的选择。

任何提示都受到高度赞赏。

标签： javascriptphphtmldom

解决方案

如果您查看页面源代码，而不是检查元素，您会发现它最终是这样的

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

双引号内的双引号可能会混淆浏览器。将内引号转换为单引号。

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

这应该具有预期的效果：

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

推荐阅读