How do I replace variables in HTML with an object of variables from jQuery?

Question

I am trying to make a system for my web page that gets the content of a template found in the HTML and then replaces the appropriate variables with the corresponding values which is stored in an object. The problem is that nothing is being replaced. In this example, I am getting the contents of an RSS file that displays forum posts. I use ajax to get the contents, then iterate through each item. I assign the xml tag values to an object whose keys correspond to the variabls in the HTML template. For every post found, it should replace the HTML variable with the contents of the xml tag.

This is my Javascript:

$.ajax({
        url: "rsstest.xml",
        type: "GET",
        dataType: 'xml',
        crossDomain: true,
        success: function(xml){
            var news = $('#news-results');
            news.empty();
            if($(xml).find('item').length > 0){
                $(xml).find('item').each(function(){
                    var temp_vars = {
                            news_title: $(this).find('title').text(),
                            news_body: $(this).find('description').text(),
                            news_date: $(this).find('pubDate').text(),
                            news_link: $(this).find('link').text()
                    }
                    var template = $('#news-template').contents().clone();
                    for(const variable in temp_vars){
                        template.text().replace("{"+variable+"}", temp_vars[variable])
                    }
                    news.append(template);
                })
            } else {
                news.append($('<p></p>').text('There is no news to display at this time.'));
            }
        }
    })

This is my HTML:

<h1>Announcements</h1>
<div id="news-results">
</div>
<div id="news-template" style="display: none;">
    <div class="media">
        <div class="media-body">
            <h3>{news_title}</h3>
            <p>{news_body}</p>
            <div class="media-footer">
                <div class="col-left">
                    <h4>Posted on {news_date}</h4>
                </div>
                <div class="col-right">
                    <a href="{news_link}" class="btn btn-default">Read More</a>
                </div>
            </div>
        </div>
    </div>
</div>

What am I doing wrong?

Answer 1

Code below will only replace the text without assigning it.

template.html().replace("{"+variable+"}", temp_vars[variable])

You have to assign after replacing the text to update the actual value.

template.html(template.html().replace("{"+variable+"}", temp_vars[variable]))