如何仅使用JS和HTML创建按钮

Question

I was asked to create a very very basic POS after some the user selects what the what to buy and the quantity, it should show on a table row showing price, quantity and product; i´ve done that already but i was also asked to make a button next to the row that could eliminate the whole row if the user wants to. Here is my JS code:

function histrow() {

    var prod = document.getElementById("product");
    var cant = document.getElementById("quantity");
    var pre = document.getElementById("prrice");
    var table = document.getElementById("tblHistory");
    var posicion = table.rows.length;
    var newRow = table.insertRow(posicion);

    //Creates the new cells
    var celUno = newRow.insertCell(0);
    var celDos = newRow.insertCell(1);
    var celTres = newRow.insertCell(2);
    var celCuatro = newRow.insertCell(3);
    var celCinco = newRow.insertCell(4);

    //Starts to asign values to the cells 
    celUno.innerHTML = prod.value;
    celDos.innerHTML = cant.value;
    celTres.innerHTML = pre.value;
    //This is the TOTAL
    celCuatro.innerHTML = pre.value * cant.value;
    //Here is where I want the button to show
    celCinco.innerHTML = 


}

I can't create just a button on HTML because I don't how many rows will the user create, my teacher is will only allow us to use HTML and JavaScript It's my first semester in software engineering Thanks for the help

 <!-- App4 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>

<div id="part1">
    <center>
            <h2> POS </h2>
            <br />
            <br />
            <select class="venta" id="product">
                <option>Choose a product</option>
                <option id="1" >1</option>
                <option id="2" >2</option>
                <option id="3" >3</option>
                <option id="4" >4</option>
                <option id="5" >5</option>
                <option id="6" >6</option>
                <option id="7" >7</option>
                <!--Hasta aqui van las bebidas-->
                <option id="8" value="Cheetos">Cheetos</option>
                <option id="9">9</option>
                <option id="10">10</option>
                <option id="11">11</option>
                <option id="12">12</option>
                <option id="13">13</option>
                <option id="14">14</option>
                <option id="15">15</option>
            </select>
            <label> Product</label>
            <br />
                <!--Es el precio del producto-->
            <input type="number" id="prrice" placeholder="¿How much?" class="sale" />
            <label> Price</label>
            <br />
                 <!--Its the quantity of the product-->
            <input type="number" min="1" id="quantity" placeholder="¿How many?" class="sale" />
            <label> Quantity</label>
            <br />
            <br />
                <!--This button adds the order to the table -->
            <button id="btnadd">Add to order </button>

    </center>
    </div>

<!--Here is the table where it shows what the user orders-->

<div id="part2">
    <table id="tblHistory>
        <thead>
            <tr>
                <td>Product</td>
                <td>Quantity</td>
                <td>Price</td>
                <td>Total</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Answer 1

This is what you want, i added a button to the fiddle so you have an event to see it work: https://jsfiddle.net/0j1me71m/3/

    function editTextArea() {
       var options = document.getElementById("options");
       options.innerHTML = options.innerHTML + "<button type='button' onclick='doSomething()'>I am a Button</button><br>";
    }
    function doSomething(){
       alert("see me work!");
    }

Answer 2

Here is your answer:

http://liveweave.com/gGxK4b

JavaScript:

// Create the button and the text inside
var btn = document.createElement("button");
var btnText = document.createTextNode("This is just a button");
btn.appendChild(btnText);

// Add to the div (main)
var element = document.getElementById("main");
element.appendChild(btn);

HTML:

<div id="main">
</div>

Answer 3

What you're trying to do is suboptimal.

Instead, have your HTML button defined in a variable and inject it to the page when needed.

Basically something like this:

<script>
var button = "<button style=\"background-color:green; border:1px solid darkgreen; color:white; font-weight:bold; padding: 5px 10px;\">PURCHASE</button>";

document.getElementById('tag-id').innerHTML = button;
</script>

See Demo