Question

我有一个div，我想使用JS将文本附加到div。目前在我的代码中，文本出现但不在div上。

为什么它不会附加到div panel上？

$('.panel').append(
  '<div class="container" style=" width:30%"> ' +
  '<p class="name"> item.name</p>' +
  '</div>'
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-8">
    <div class="panel" id="panel">
    </div>
  </div>
</div>

Answer 1

$('.panel').append(
  '<div class="container" style=" width:30%"> ' +
  '<p class="name">'+item.name+'</p>' +
  '</div>'
);

Answer 2

尝试

('#panel').append(
        '<div class="container" style=" width:30%"> '+
        '<p class="name">' + item.name+'</p>'+
         '</div>'

    );

Answer 3

使用返回勾选(``)，因为它更清晰，更易于使用，如下所示：

有关详细信息，请参阅新的ES6功能：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

＆＃13;

var item = {name:'John'}
$('.panel').append(`<div class="container" style=" width:30%">
        <p class="name"> ${item.name}</p>
         </div>`
    );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-8">  
    <div class="panel" id="panel">



    </div>
  </div>
</div>

＆＃13;

Answer 4

为什么不附加到div面板上？

按预期工作，只需在border-color div 中添加一些container即可验证。

＆＃13;

$('.panel').append(
  '<div class="container" style=" width:30%"> ' +
  '<p class="name"> item.name</p>' +
  '</div>'

);

＆＃13;

.container
{
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-8">
    <div class="panel" id="panel"></div>
  </div>
</div>

＆＃13;

使用JS将文本附加到div

4 个答案: