Solution 1 :

Your P tag has class name and you used ID selector.

Just switch to id:

 <p id="descriptionDisplay"> </p>

Solution 2 :

Try this, use .html

$("p").html("Hello <b>world</b>!");

Problem :

I have this ajax call that returns a short sentence which is for descriptive purposes for a user. Through the debugging console I can see that I am returning the correct data. My issue arises when I attempt to append this data to a html <p> tag. I have tried both .append and .text as I am using JQuery. I have had no luck so far, where am i going wrong?


  <p class="descriptionDisplay"> </p>


    $('#scenarioDropdownList').change(function () {
        var scenarioId = $('#scenarioDropdownList option:selected').attr('id');

    function getscenarioDescription(scenarioId) {
                    type: "GET",
                    url: 'https://localhost:44340/api/ScenarioDescriptors/GetScenarioDescriptions',
                    data: {scenarioId: scenarioId},
                    dataType: 'JSON',
                    success:function(data) {
                        $.each(data, function(key, val) {
                            var descriptionText = val.scenarioDescription;

                            $('#descriptionDisplay').text(descriptionText); // This part isn't working correctly



The output of console.log($('#descriptionDisplay').length) is 0.


Comment posted by Pranav C Balan

can you share the html?

Comment posted by Pranav C Balan

can you share output of

Comment posted by Ali Sheikhpour

It is better to debug why the code in the original question is not working.