javascript - 如何在里面添加一个带有javascript的div

Question

我有这个

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

我试过这个插入

  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>"

在 inprog_table div 里面。我知道这真的错了，但我不知道如何附加所有这些。

Answer 1

JavaScript 中的字符串文字不能延伸到多行，你必须使每个字符串在它开始的同一个尖上结束，或者用一个转义新行\

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

利用.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>");

使用.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

对这些东西使用jQuery。纯 Javascript 实在是太麻烦了。

这是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

您可以使用：

。附加（）-

例如：$("#div1").append(要追加的元素)

或者

。后（）-

例如：$("#div1").after(要追加的元素)