Playing js variable in html

0

I made two date inputs, and when I click "generate" it shows in the console the product that has these dates, but it is a variable, how do I turn a class and play in html? there everytime I call the class it appears, eg: <h2 class="produto-1"></h2> Then he would show up there.

Code:

 <body>

    <input type="date" id="inicio">
    <input type="date" id="fim">
        <button onclick="PostData();">GERAR</button>
<!-- -->


    <script>
        function PostData() {
            var inicio,fim;
            inicio = document.getElementById('inicio').value;
            fim = document.getElementById('fim').value;
                fetch('http://localhost/api', {
                    method: 'POST',
                    headers: {'Content-Type':'application/x-www-form-urlencoded'},
                    body: 'inicio=${inicio}&fim=${fim}'
                }).then(response => response.json().then(data => ({
                    data: data,
                    status: response.status
                })
                ).then(res => {
                    var insere = (res.data.dados.nome);
                    console.log(insere);
                })
                    )
        }

    </script>

 </body>
    
asked by anonymous 16.02.2018 / 14:04

1 answer

0

Do the following, first create the element in your html as follows: <h2 class="produto-1"></h2> , below the console.log you gave to display, do the following: $('.produto-1').html(insere) ; and see the result.

A basic example:

function PostData(){
   var r = $('#inicio').val();
   $('.produto-1').html(r);

}
<input type="date" id="inicio">
    <input type="date" id="fim">
        <button onclick="PostData();">GERAR</button>
<!-- -->
<h2 class="produto-1"></h2>


    
        





<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The difference is that you are getting content via ajax .

    
16.02.2018 / 14:10