如何修剪 <ul> 和 <li> 标签，但值 <li> 会保持不变吗？

Question

I have created an ajax method to search for User Lists. But the ajax function returning me such as :

 <ul><li>User Name</li></ul>

I want to trim <ul></ul> and <li></li> tag in main page to use the exact value.
Like :

Before :

<ul><li>User Name</li></ul>

After :

User Name

The ajax result will store in :

<div class="input-group" id="userList"></div>

I have done already some javascript method to do so

Ajax function :

< script >
    $(document).ready(function() {
    $('#run').keyup(function() {
        var query = $(this).val();
        if (query != '') {
            $.ajax({
                url: "userSearch.php",
                type: "POST",
                data: {
                    query: query
                },
                success: function(data) {
                    $('#userList').fadeIn();
                    $('#userList').html(data);
                    paymentStatus(data);
                }
            });
        } else {
            $('#userList').fadeOut();
        }
    });
    $(document).on('click', 'li', function() {
        $('#run').val($(this).text());
        $('#userList').fadeOut();
    });
    }); <
/script>

userSearch.php File Code :

<?php
require_once '../../config/config.php';
if(isset($_POST['query']))
{
    $output = '';
    $query = "SELECT Name, Id FROM ucoe_users WHERE Name LIKE '%".$_POST['query']."%' AND RoleId = 3";
    $result = mysqli_query($connection, $query);
    $output = '<ul>';
    if(mysqli_num_rows($result)> 0 )
    {
        while($row = mysqli_fetch_array($result))
        {
            $output .= "<li>".$row['Name']."</li>";
        }
    }
    else
    {
        $output .= '<li>User Not Found</li>';
    }
    $output .= "</ul>";
    echo $output;
}
?>

Answer 1

Use $(html).text() to get text value from your html

           success: function(data) {
                $('#userList').fadeIn();
                $('#userList').html($(data).text());
                paymentStatus(data);
            }

 var html = '<ul><li>User Name</li></ul>'; console.log($(html).text()); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

You can use the jQuery as following ,

    var arrOfValues = [];
    $('ul li').each(function(i)
    {
       arrOfValues.push($(this).text()); //every value of ul li will be push in arrOfvalues.

    });
$('#userList').fadeOut();

Answer 3

If it was a DOM element then it would be straight forward just get innerText

for eg :

<ol>
<li>User Name</li>
</ol>

<script>
var olDom = document.getElementsByTagName("ol");
console.log(olDom[0].innerText)
</script>

But in your case you are getting HTML as a response of Ajax, so first we need to create a wrapper div to hold your response in a form of DOM and then we will call innerText.

<script>
var wrapperDiv = document.createElement('div');
wrapperDiv.innerHTML = data;
$('#userList').html(wrapper.innerText);
</script>