Inserting a Button into HTML Cell

Question

I am currently trying to get this buttons into my HTML table.

This is the code I want to insert:

<button class=\"btn btn-primary btn-xs my-xs-btn\" type='button' onClick='changeRec(".$num.")' >
<span class=\"glyphicon glyphicon-pencil\"></span> Edit
</button>

And here is my attempt at inserting it.

<button type="button" class="btn btn-primary btn-lg" onclick="myFunction()">Add</button>

<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cellInstruction = row.insertCell(-1);
cellInstruction.innerHTML = '<button class=\"btn btn-primary btn-xs my-xs-btn\" type='button' onClick='changeRec(".$num.")' >
                            <span class=\"glyphicon glyphicon-pencil\"></span> Edit
                        </button>';
}
</script>

Any help would be appreciated. Thanks!

Answer 1

You are not concatenating the string correctly and you do not need to escape double quotes.

Here is working example.

<button type="button" class="btn btn-primary btn-lg" onclick="myFunction()">Add</button>
<table id="myTable"></table>
<script>
  function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cellInstruction = row.insertCell(-1);
    cellInstruction.innerHTML = '<button class="btn btn-primary btn-xs my-xs-btn" type="button" onClick="changeRec(".$num.")" >'
    + '<span class="glyphicon glyphicon-pencil"></span> Edit</button>';
  }
</script>

But you should rather separate your javascript from your html and use an eventlistener for the click event.

Here is how you could do that.

var addBtn = document.getElementById('add-btn');

function addEditBtn() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cellInstruction = row.insertCell(-1);
    cellInstruction.innerHTML = '<button class="btn btn-primary btn-xs my-xs-btn" type="button">'
    + '<span class="glyphicon glyphicon-pencil"></span> Edit</button>';
}

addBtn.addEventListener('click', addEditBtn, false);

<button type="button" class="btn btn-primary btn-lg" id="add-btn">Add</button>
<table id="myTable"></table>

An other way would be to create the button element using document.createElement.

var addBtn = document.getElementById('add-btn');

function addEditBtn() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(-1);
    var cellInstruction = row.insertCell(-1);
    var button = document.createElement('button');
    var span = document.createElement('span');
    button.setAttribute('class', 'btn btn-primary btn-xs my-xs-btn');
    button.setAttribute('type', 'button');
    span.setAttribute('class', 'glyphicon glyphicon-pencil');
    span.innerHTML = " Edit";
    button.appendChild(span);
    cellInstruction.appendChild(button);
}

addBtn.addEventListener('click', addEditBtn, false);

<button type="button" class="btn btn-primary btn-lg" id="add-btn">Add</button>
<table id="myTable"></table>