JS内部HTML内的PHP圈

Question

When I press the button it should add one more div, like the one below, calling JS function called comida_campos() .

<div class="panel panel-default">
    <div class="panel-body">
        <div id="comida_campos">
        </div>
        <div class="col-sm-6 nopadding">
            <div class="form-group">
                <input id="quantidade" class="form-control"name="quantidade[]" placeholder="Quantidade/g" type="text" value="">
            </div>
        </div>
        <div class="col-sm-6 nopadding">
            <div class="form-group">
                <div class="input-group" id="replicate"> 

                    <select class="form-control" name="alimento[]">
                        <option value="">Alimento</option>
                        <script>
                            document.write('<?php
                                $it=0;
                                while($it <= 9){

                                echo '<option value="'.$array_of_aliments[$it]['Idalimento'].'">'.$array_of_aliments[$it]['alimento'].'</option>';
                                $it++;
                                }
                            ?>');
                        </script>
                    </select>
                    <div class="input-group-btn">
                        <button class="btn btn-success" onclick="comida_campos();" type="button">
                            <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Result of the code

Here is the JS fuction:

var room = 1;
function comida_campos() {
    room++;
    var objTo = document.getElementById('comida_campos')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass" + room);
    var rdiv = 'removeclass' + room;
    divtest.innerHTML = '<div class="col-sm-6 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Quantidade/g"></div></div><div class="col-sm-6 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="alimento[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';

    objTo.appendChild(divtest)
}

The problem is that I want to insert my PHP while circle is inside the divtest.innerHtml , and I don't have any idea how to do this.

Answer 1

PHP is server side, JS is client (browser) side. Server side script (PHP in this case) gets executed before response is sent to the client. Once client has received the response, JS is executed in the browser and has no more access to PHP interpreter.

The simple answer is: You can not run PHP from Javascript.

The more correct answer is: look in to async JS requests (AJAX). This allows you to make separate requests to the server while executing JS. https://en.wikipedia.org/wiki/Ajax_(programming) - this will give you a basic understanding and a starting point.