How to change only text inside td of table table using JQuery
<p>I am trying to update the text inside a cell that contains also an input box.
In line <code>$(ib).closest('td').prop('textContent',888);</code> I am assigning the value 888 to the text but this results in assignment of cell's text to "888" but also for some reason deleting the input box. </p>

<p>My code (Django template):</p>

<pre><code>{% extends "base.html" %}
{% block head_scripts %}
&lt;script type="text/javascript" src="/static/script/api_recs.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/static/script/site_filter.js"&gt;&lt;/script&gt;

&lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"/&gt;

&lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"&gt;&lt;/script&gt;

{% endblock %}

{% block title %}
Schedule Match
{% endblock %}

{% block styles %}
&lt;style type="text/css"&gt;
    tfoot {
        display: table-header-group;
    }

&lt;/style&gt;
{% endblock %}

{% block content %}

&lt;table id='pm_table' class="display" cellspacing="0" width="100%"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            {% for col_name in table_headers%}
            &lt;th&gt;{{col_name}}&lt;/th&gt;
            {% endfor %}
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot&gt;
        &lt;tr&gt;
            {% for col_name in table_headers%}
            &lt;th&gt;{{col_name}}&lt;/th&gt;
            {% endfor %}
        &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody&gt;
        {% for data_row in table_data%}
        &lt;tr&gt;
            {% for item in data_row%}
            &lt;td&gt;{{item}}&lt;/td&gt;
            {% endfor%}
        &lt;/tr&gt;
        {% endfor %}
    &lt;/tbody&gt;
&lt;/table&gt;

&lt;script&gt;
$(document).ready(function() {
    var SITE_ID_COL = 0;
    var PRIORITY_COL = 3;
    var IS_SCHEDULED_COL = 4;

    // priority input box
    $("#pm_table td:nth-child(" + PRIORITY_COL + ")").each(function() {

        // $(this).children().css('visibility', 'hidden');
        $(this).css('text-align', 'center');
        // $(this).css('font-size', 0);

        var $input_box = $('&lt;input type="text" class="priority_changed" /&gt;')
        $input_box.prop('value', $(this).text());
        $input_box.prop('size', 1);
        $input_box.css('text-align', 'center');
        $input_box.prependTo(this);
    });
    // remember old value of input box
    $("#pm_table td:nth-child(" + PRIORITY_COL + ")").on('focus', '.priority_changed', function() {
        this.old_val = this.value;

    });
    // priority input box listener
    $('#pm_table').on('change', '.priority_changed', function() {
        var $changed_tr = $(this).closest('td').closest('tr');
        var site_id = $changed_tr.children().eq(SITE_ID_COL).text();
        var old_val = parseInt($(this).closest('td').text());
        var ib = this;

        // confirm change
        if (!confirm('Change priority for site ' + site_id + ' from ' + this.old_val + ' to ' + this.value + " ?")) {
            //revert input box value
            $(this).prop('value', this.old_val);
        } else {
            // make the change in db
            new_val = this.value;
            var url = '/api/manage/schedule_match/set_priority/' + site_id + '/' + new_val + '/';

            $.ajax({
                type: 'POST',
                url: url,
                success: function(result) {
                    res = JSON.parse(result) // todo read res
                    alert('SUCCESSFULLY changed priority for site ' + site_id + ' from ' + ib.old_val + ' to ' + res.new_val + ".");
                    $(ib).closest('td').prop('textContent',888);



                },
                error: function() {
                    alert('ERROR updating database!');
                    //revert input box state
                    $(ib).prop('value', ib.old_val);
                },
            });
        }
    });      
&lt;/script&gt;
{% endblock %}
</code></pre>

<p>I tried <code>$(ib).closest('td').text(888);</code> and many different properties like innerText, innerHtml,<code>$(ib).closest('td').childNodes[1].prop('text',888)</code> but without result in right direction. 
What am I doing wrong here?</p>