How to Append a div with javascript inside

Question

I have this

<div id="inprog_table">
</div>

I tried this to insert

  var div = document.getElementById('inprog_table');
  div.innerHTML = div.innerHTML+
      "<div class='row'>
              <div class='col-xs-7'>
                 "+ $(".row.active .col-xs-7 p:first-child").text()+"  
              </div>
              <div class='col-xs-2'>
                  "+ $(".row.active .col-xs-7 p:last-child").text()+"
              </div>

              <div class='col-xs-2'>
                1
              </div>"

inside inprog_table div. I know it's really wrong, but I don't know how to append all of this.

Answer 1

String literals in JavaScript cannot extend through multiple lines, you'll have to make each string end on the same tine it started or escape the new line with a \\

var div = $('#inprog_table');
div.append( "<div class='row'>"+
              "<div class='col-xs-7'>"+
                $(".row.active .col-xs-7 p:first-child").text() + 
              "</div>" +
              "<div class='col-xs-2'>" +
                $(".row.active .col-xs-7 p:last-child").text()+
              "</div>"+
              "<div class='col-xs-2'>1</div>"+
            "</div>");

Answer 2

Use .append()

$('#inprog_table').append("<div class='row'><div class='col-xs-7'>" + $(".row.active .col-xs-7 p:first-child").text() + "</div><div class='col-xs-2'>" + $(".row.active .col-xs-7 p:last-child").text() + "</div><div class='col-xs-2'>1</div>");

Use .html()

$('#inprog_table').html(function (_, old_html) {
    return old_html + "<div class='row'><div class='col-xs-7'>" + $(".row.active .col-xs-7 p:first-child").text() + "</div><div class='col-xs-2'>" + $(".row.active .col-xs-7 p:last-child").text() + "</div><div class='col-xs-2'>1</div>"
});

Answer 3

Use jQuery for this stuff. Pure Javascript is just too much of a hassle.

Here's the code in jQuery:

$('#inprog_table').html(
    '<div class="row">' +
        '<div class="col-xs-7">' +
            $(".row.active .col-xs-7 p:first-child").text() +  
        '</div>' +
        '<div class="col-xs-2">' +
            $(".row.active .col-xs-7 p:last-child").text() +
        '</div>' +
        '<div class="col-xs-2">1</div>' +
    '</div>'
);

Answer 4

You can either use:

.append()-

Ex: $("#div1").append(Element to append)

Or

.after()-

Ex: $("#div1").after(Element to append)