javascript - 从 HTML 添加新元素到 div 中

标签 javascript php html

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

并且,当我按下分配了该功能的按钮时,页面只是刷新并且不显示任何内容,这段代码有什么问题?

最佳答案

尝试appendChild()方法。

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

更改此:<button name="addSender">+</button>对此:<type="button" button name="addSender">+</button>

关于javascript - 从 HTML 添加新元素到 div 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51850630/

相关文章:

javascript - 使用 javascript/Python 的递归调用方法中的项目序列(除了语法之外的问题相同)

php - 读取MySQL表并回显1个div中具有不同状态的2条记录

php - paypal团购?

html - 如何阻止固定侧边栏位于页脚顶部?

html - 具有不同字体大小元素的导航栏

Javascript 变量超出范围/null?

javascript - 测试 AngularJS 指令的惯用方法是什么?

javascript - 如何管理使用 AWS Amplify Authentication 创建的用户

具有 2 个计数和连接的 php 查询

javascript - Slick 轮播边缘的淡入淡出效果