Javascript 从HTML在div中添加新元素_Javascript_Php_Html

Javascript 从HTML在div中添加新元素

javascript php html

Javascript 从HTML在div中添加新元素,javascript,php,html,Javascript,Php,Html,我有一个PHP代码，其中我使用了一个HTML代码，所有这些看起来都类似于下一段代码： <?php $receiverNumber = 1; $senderNumber = 1; ?> <head> <script src="./index.js"></script> </head> <form method="post" action=""> <div id="senders">

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

而且，当我按下分配函数的按钮时，页面只是刷新，没有显示任何内容，这段代码有什么问题？

为什么不使用

append（）

或

before（）

，

after（）

jQuery函数？它是在另一个元素中添加元素的最简单的方法。例如：

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

这将在

ElementSelector

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

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

这两个函数将在

元素选择器

之后或之前插入任何内容

（html或文本）

，请尝试

appendChild（）

方法

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

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

此外，HTML中缺少

type=“button”

元素

将此：

更改为：

确定两个选项

从中调整当前按钮的onClick事件

首先，您需要将按钮类型更改为按钮
，以便在您单击它时它不会提交表单
然后，insertBefore
需要一个节点作为其第一个参数，因此您可以执行以下操作：
const fragmentElement = new DOMParser().parseFromString(fragment, 'text/html');    
element.insertBefore(fragmentElement.firstChild, element.firstChild);

在表单中的按钮中，只需添加type=“button”，如果没有，默认情况下，按钮将触发表单的提交操作，这就是为什么要重新加载Hanks，这解决了我一半的问题我正在尝试你所说的appendChild（）让我知道你的结果。appendChild的想法解决了我的问题，谢谢=）这可以工作，但会有点混乱…使用纯JS和HTML编辑这个问题在性能和可靠性方面更有意义。也许，这正是我通常处理类似事情的方式。这个对我来说是新的，直到现在我才看到它，所以谢谢你。没问题-很多时候，这些表单的问题都是因为缺少定义元素而出现的，比如本例中的按钮。通常是一个简单的修复！为什么要使用JQuery？他的代码中没有现有的JQuery，所以这将花费比它的价值更多的时间？纯JS在这方面做得很好…你的想法是什么？我看到他没有使用jquery，但我建议使用这些函数，因为在我看来，这是最简单的方法，我不反对！jquery提供了一个很好的解决方案在我分配了一个函数的元素下面，我还有一些元素，当我按下按钮时，div下面的所有内容，包括div都被删除了，并且添加了新元素=/这不应该发生insertBefore
只添加内容，不删除任何内容（如果要插入的元素已经存在，它还可以移动该元素）。