I’m using ajax to pass some data from an advanced custom field wysiwyg editor. In the markup I added, it is the div with class ‘bio’ I’m referring to. The problem is that when I get the data back, all the original markup is gone (ul and hyperlinks). It’s mainly the hyperlinks I need. Is there a way to retain the markup as it was originally entered, or is there a way I can reconstruct it?

When I get it back it’s all in one big paragraph without any of the original elements I added (the ul’s and hyperlinks in the li’s).

<div id="<?php echo $post->ID; ?>" class="team-section__member" data-ajax-url="<?php echo admin_url("admin-ajax.php"); ?>">
    <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
    <div class="info">
        <?php
        $s = get_the_title();
        $name = explode(' ', trim($s));
        ?>
        <h4 class="name"><?php echo get_the_title(); ?></h4>
        <h6 class="title"><?php echo get_field('team_member_title'); ?></h6>
        <a class="phone" href="tel:<?php echo get_field('team_member_phone_number'); ?>"><?php echo get_field('team_member_phone_number'); ?></a>
        <a class="email" data-email="<?php echo get_field('team_member_email'); ?>" href="mailto:<?php echo get_field('team_member_email'); ?>">Email <?php echo $name[0] . "\n"; ?></a>
        <div class="bio"><?php echo get_field('team_member_bio'); ?></div>
    </div>
</div>   

   // Member Bio modal w/ajax
        $(".team-section__member .button").click(function () {
            let member = $(this).parent().parent();
            let memberId = member.attr('id');
            let ajaxUrl = member.data('ajaxUrl');
            let name = member.children('.info').find('.name').text();
            let image = member.children('img').attr('src');
            let title = member.children('.info').find('.title').text();
            let email = member.children('.info').find('.email').data('email');
            let phone = member.children('.info').find('.phone').text();
            let bio = member.children('.info').find('.bio').text();
            $("body").toggleClass("scroll-lock");
            console.log(bio);
            $.ajax({
                type: "POST",
                url: ajaxUrl,
                dataType: 'json',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                data: {
                    action: 'post_member_id',
                    id: memberId,
                    image: image,
                    name: name,
                    title: title,
                    email: email,
                    phone: phone,
                    bio: bio,
                },
                success:
                    function (data) {
                        $(".team-modal__content").empty();
                        $(".team-modal__content").append(

                            "<div class='team-modal__container'>" +
                            "<button class='modal-button'><span></span><span></span></button>" +

                            "<div class='team-modal__image-wrapper'>" +
                            "<img class='team-modal__image' src=" + image + ">" +
                            "</div>" +

                            "<div class='team-modal__info-wrapper'>" +
                            "<h3 class='team-modal__name'>" + name + "</h3>" +
                            "<h5 class='team-modal__title'>" + title + "</h1>" +
                            "<a class='team-modal__email' href=mailto:" + email + ">" + email + "</a>" +
                            "<a class='team-modal__phone' href=tel:" + phone + ">" + phone + "</a>" +
                            "<div class='team-modal__bio'>" +
                            bio +
                            "</div>" +

                            "</div>" +
                            "</div>"
                        );
                    },
                error: function (error) { console.log(error) },
            });

>Solution :

Change this line…

let bio = member.children('.info').find('.bio').text();

To this…

let bio = member.children('.info').find('.bio').html();

The jQuery .text() method strips all html markup, where the .html() method keeps the markup