Как показать значение данных jQuery в списке HTML данного формата?

Question

Как мне напечатать значения jQuery в виде списка формата HTML?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="comment author-comment">
  <div class="info">
    <a href="#">Jack Smith</a>
    <span>3 hours ago</span>
  </div>
  <a class="avatar" href="#">
    <img src="{{ asset('commentui/images/avatar_author.jpg') }}" width="35" alt="Profile Avatar" title="Jack Smith" />
  </a>
  <p>JQuery value is here.</p>
</li>

jQuery('#comntRetrive').click(function(e){
  $.get('{{ URL::to('comment/retrive') }}', function(data) {
    console.log(data);
  });
});

Answer 1

Вы можете сделать это:

jQuery('#comntRetrive').click(function(e){
    $.get('{{ URL::to('comment/retrive') }}',function(data){
        console.log(data); // to check the data
        $('.comment p').html(data);
    });
});

Answer 2

Вы должны установить идентификатор для тега p

<p id="pcontainer">JQuery value is here.</p>

, тогда вы можете

jQuery('#comntRetrive').click(function(e){
   $.get('{{ URL::to('comment/retrive') }}',function(data){
       $('#pcontainer').append('<div>'+data+'</div');
   });
});

append, чтобы вы могли использовать теги html тоже, или, если используется только текст:

$('#pcontainer').text(data);

Answer 3

Если вы действительно хотите использовать JQuery, вы можете сделать что-то вроде этого:

HTML

<p id="value-container">JQuery value is here.</p>

JS

jQuery('#comntRetrive').click(function(e){
   $.get('{{ URL::to('comment/retrive') }}',function(data){
       $('#value-container').text(data);
   });
});

Надеюсь, это помогло.

Редактировать

Как сказал dm707 , используя .html () вместо .text ()будет обрабатываться как HTML, а не как обычный текст.

Answer 4

Вы можете попытаться добавить свои данные в DOM, где хотите, используя .html () или .text ()

jQuery('#comntRetrive').click(function(e){
   $.get('{{ URL::to('comment/retrive') }}',function(data){
       $('#value-container').html(data);
   });
});`