Question

我有一个PHP代码，其中我使用了HTML代码，所有这些看起来都类似于下一个代码片段：

<?php
    $receiverNumber = 1;
    $senderNumber = 1;
?>

<head>
    <script src="./index.js"></script>
</head>
<form method="post" action="">
    <div id="senders">
        <div>
            Sender 0
            <input placeholder="Sender ID" name="sender-0"/>
            <button name="addSender">+</button>
        </div>
    </div>
    <div id="receivers">
        <div>
            Receiver 0
            <input placeholder="Receiver Wallet ID" name="receiver-0"/>
            <input placeholder="Received Sum" name="received-0"/>
            <button onClick="addNewElement('receivers', <?php $receiverNumber ?>, 'R')">+</button>
        </div>
    </div>
</form>

我要在此处执行的操作是单击+按钮来触发一个函数，该函数将在div中添加一个新元素。这是我正在使用的JS代码：

function newSender(ID){
    return (`<div>
                 Sender ${ID}
                <input placeholder="Sender ID" name="sender-${ID}"/>
            </div>`);
};
function newReceiver(ID){
    return (`<div>
                 Receiver ${ID}
                <input placeholder="Receiver Wallet ID" name="sender-${ID}"/>
                <input placeholder="Received Sum" name="received-${ID}"/>
            </div>`);
};
function addNewElement(id, idNum, purpose){
    switch(purpose){
        case 'R' : fragment = newReceiver(idNum); break;
        case 'S' : fragment = newSender(idNum); break;
        default: break;
    };
    element = document.getElementById(id);
    element.insertBefore(fragment, element.firstChild);
}

然后，当我按下分配了该功能的按钮时，页面只会刷新而没有显示任何内容，这段代码有什么问题？

Answer 1

尝试使用appendChild()方法。

此外，您在HTML中缺少type="button"元素。

将此：<button name="addSender">+</button>更改为：<type="button" button name="addSender">+</button>

Answer 2

首先，您需要将按钮类型更改为button，以便单击时它不会提交表单。

然后，insertBefore需要一个节点作为其第一个参数，因此您可以执行以下操作：

const fragmentElement = new DOMParser().parseFromString(fragment, 'text/html');    
element.insertBefore(fragmentElement.firstChild, element.firstChild);

Answer 3

为什么不使用append()或before()，after() jQuery函数？这是在另一个元素内添加元素的最简单方法。例如：

$('button').click(function(){
    $('ElementSelector').append('anyContent');
})

这将在(html or text)的内部和结尾添加任何内容ElementSelector

$('button').click(function(){
    $('anyElementSelector').after('anyContent');
});

$('button').click(function(){
    $('anyElementSelector').before('anyContent');
});

这两个函数将在(html or text)之前或之前插入任何内容ElementSelector

Answer 4

确定您可以选择的两个选项

从以下位置调整当前按钮的onClick事件 <button onClick="addNewElement('receivers', <?php $receiverNumber ?>, 'R')">+</button>;

至 <button onClick="((e) => {e.preventDefault(); addNewElement('receivers', <?php $receiverNumber ?>, 'R')} )()">+</button>

如果您将HTML和JS放在同一个文件中，则可以这样做

const addElementButton = document.querySelector('.addElementButton'); const recieverNumber = <?php echo $receiverNumber; ?>; addElementButton.addEventListener('click', (e) => { e.preventDefault(); addNewElement('receivers', recieverNumber, 'R') })

在HTML中的div中添加新元素

4 个答案: