Как создать надстройку формы одним нажатием кнопки?

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

Чтобы добавить html в div.

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

С jQuery жизнь намного проще, вы можете использовать JQuery