代码之家 › 专栏 › 技术社区 › Eugen-Andrei Coliban HARI PRASAD GANGI

从HTML在DIV中添加新元素

html php javascript

Eugen-Andrei Coliban HARI PRASAD GANGI · 技术社区 · 6 年前

我有一个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);
}

当我按下分配函数的按钮时,页面只会刷新,不显示任何内容,这段代码中有什么问题?

4 回复 | 直到 6 年前

JKimbrough 6 年前

试试 appendChild() 方法。

此外,您还缺少 type="button" HTML中的元素。

改变这一点: <button name="addSender">+</button> 对此: <type="button" button name="addSender">+</button>

Jeto 6 年前

首先,您需要将按钮类型更改为 button 因此当您单击表单时,它不会提交表单。

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

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

Duran Humes 6 年前

好的,有两种选择

调整当前按钮的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') })

MW_dev 6 年前

为什么你不使用 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或文本) 在…之后或之前 元件选择器