javascript - 如何通过单击按钮创建表单加载项？

Question

目前，我在实习期结束时正在为客户创建一个网站。 我希望创建一个按钮，允许添加表单的现有部分。

我尝试通过 Javascript 中的函数添加它，但是当我单击按钮时什么也没有发生，但是当我在控制台中执行 console.log ('test') hello

function dog_func ($atts) {
    $list=array(

    'Affenpinscher' => 'Affenpinscher',
    'Airedale Terrier' => 'Airedale Terrier',
    'Ariégeois' => 'Ariégeois',
    'Barbet' => 'Barbet',
    'Barbu Tchèque' => 'Barbu Tchèque' ,
    'Berger de Russie' => 'Berger de Russie',  
    'Berger des Pyrénées' => 'Berger des Pyrénées',
    'Berger des Shetland' => 'Berger des Shetland',
    'Berger du Caucase' => 'Berger du Caucase',
    'Berger du massif du Karst' => 'Berger du massif du Karst',
    'Berger finnois de Laponie' => 'Berger finnois de Laponie',
    'Berger Hollandais' => 'Berger Hollandais',
    'Berger Islandais' => 'Berger Islandais',
    'Bouvier de l\'Entlebuch' => 'Bouvier de l\'Entlebuch',
    'Bouvier des Ardennes' => 'Bouvier des Ardennes',
    'Bouvier des Flandres' => 'Bouvier des Flandres',
    'Boxer' => 'Boxer',
    'Autre' => 'Autre');

    echo '<div id="divFields">';    
    echo '<label for="chien" class="breed">Race du chien: 
    </label>';
    echo '<input id="chien" type="text" list="chiendata">';
    echo '<datalist id="chiendata" name="chiendata" >';
    echo '<label for="adresse">ou sélectionner dans la 
    liste</label>';
    echo '<select name="adresse" class="selected" id="adresse" 
    onChange="AjoutOptionAuSelect(this)"  style="width: -webkit- 
    fill-available;" size="1">';
    foreach($list as $p => $row){
    echo "<option  value='".$p."'>" . $row ."</option>" ; 
    }
    echo '</select>';
    echo '</datalist>';
    echo '<div>';
    echo '<label for="name" class="breed">Si autre préciser : 
    </label>';
    echo '</div>';
    echo '<div>';
    echo '<input type="text" name="dog">';
    echo '</div>';
    echo '</div>';

  }

    add_shortcode ('dog_api', 'dog_func');



    function dog_shortcode(){
        echo '<input type="button" class="add" value="Ajouter un chien" id="test" onClick="addField();">';

}
add_shortcode( 'dog_breed' , 'dog_shortcode');





function addField() {
     var field = "<input type='text' name='' value=''/>";
     document.getElementById('divFields').innerHtml += field;
     console.log('test');
}

我解释说我必须创建一个表单来添加比赛中的狗，所以我尝试使用我选择的按钮添加所需的数量，以添加 2 只狗、3 只、5 只狗的品种， 我的选择是一个短代码，可将其插入客户想要的 Elementor 中

Answer 1

为了在 div 中附加 html。

function addField() {
     var field = "<input type='text' name='' value=''/>";
     // WITH JQuery
     $("#divFields").append(field);          
     // WITH JS
     document.getElementById('divFields').appendChild(field ); 
}

使用 jQuery 生活变得更加轻松，您可以使用 JQuery