單擊按鈕如何創建表單加載項？

Question

在我學習結束時，目前正在為客戶創建一個網站。 我正在尋找創建一個按鈕，該按鈕將允許添加表單的現有部分。

我嘗試通過Java語言中的函數來添加它，但是當我單擊按鈕時什么也沒有發生，但是當我在控制台hello中執行console.log（'test'）時

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個），我的選擇是將其插入其中的簡碼客戶想要的基本要素

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