单击按钮如何创建表单加载项？

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