JSを使用してdivにテキストを追加する

Question

divがあり、JSを使用してdivにテキストを追加します。現在私のコードでは、テキストが表示されますが、divには表示されません。

panelにdivが追加されないのはなぜですか？

$('.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

なぜそれがdivのパネルに追加されていませんか？

予想通りそれだけを確認するためにcontainerのdivにいくつかのborder-colorを追加し、動作します。

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

 
);

.container 
 
{ 
 
    border: 1px solid red; 
 
}

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

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

Answer 3

次のように使用することがよりクリーンかつ容易であるため、ダニ(``)をバック使用

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

    ); 

Answer 4

をお試しください：

を新しいES6を参照してくださいdetの機能不振の解決策：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

var item = {name:'John'} 
 
$('.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>