How can i print variable to formatted html in the javascript?

Question

How can I print variable to formatted html in the javascript?

I would like to display as a hyperlink:

i would like to display as a hyperlink

The result i would like to have:

-------Code---------

This is the javascript function code:

function fetchComments(leaveRequestId) {

    $('#existingComments').html(lang_Loading);
    params = 'leaveRequestId=' + leaveRequestId;
    $.ajax({
        type: 'GET',
        url: getCommentsUrl,
        data: params,
        dataType: 'json',
        success: function(data) {                

            var count = data.length;
            var html = '';
            var rows = 0;

            $('#existingComments').html('');  
            if (count > 0) {
                html = "<table class='table'><tr><th>"+lang_Date+"</th><th>"+lang_Time+"</th><th>"+lang_Author+"</th><th>"+lang_Comment+"</th></tr>";
                for (var i = 0; i < count; i++) {
                    var css = "odd";
                    rows++;
                    if (rows % 2) {
                        css = "even";
                    }
                    var comment = $('<div/>').text(data[i]['comments']).html();
                    html = html + '<tr class="' + css + '"><td>'+data[i]['date']+'</td><td>'+data[i]['time']+'</td><td>'
                        +data[i]['author']+'</td><td>'+comment+'</td></tr>';
                }
                html = html + '</table>';
            } else {

            }
            $('#existingComments').append(html);
        }
    });
}

so would you like to display the html code as a hyperlink? could you make the question clearer? — topsoftwarepro, Apr 27 '21 at 03:34
Thank you. I try to make it much more clearly.I would like to change the result from test to a hyperlink "test" link to #. — tea, Apr 27 '21 at 03:56

topsoftwarepro · Answer 1 · 2021-04-27T04:24:49.897

0

This should work.

document.getElementById("displayed").innerHTML = document.getElementById("displayed").innerHTML.replaceAll("&", "&amp;").replaceAll("<", "&lt;")

<code id="displayed"><a href="#">test</a></code>
<button onclick="document.getElementById('displayed').innerHTML = '<a href=\'#\'>test</a>'">Click To Change Into Hyperlink</button>

References

See Display HTML snippets in HTML for more information on displaying html on webpages.

edited Apr 27 '21 at 04:24

answered Apr 27 '21 at 03:37

topsoftwarepro

773
5
19

Thank you. I try to make it much more clearly.I would like to change the result from test to a hyperlink "test" link to #. – tea Apr 27 '21 at 03:57

Abhishek Pratap Singh · Answer 2 · 2021-04-27T04:08:43.817

0

I am also not sure what exactly you want, but I think you want to add some anchor tag using JavaScript and it should be rendered as HTML code, not as plain text.

Then you can do it like this.

<!DOCTYPE html>
<html>
<body>

  <div id="demo"> </div>
  <button onclick="myFunction()"> Click here </button>

  <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = '<a href="#">Test</a>';
    }
  </script>
</body>
</html>

edited Apr 27 '21 at 04:08

answered Apr 27 '21 at 04:00

Abhishek Pratap Singh

613
3
11
18

The result i would like to have: test <----hyperlink to # – tea Apr 27 '21 at 04:05
@tea then you can modify document.getElementById("demo").innerHTML = ' Test '; – Abhishek Pratap Singh Apr 27 '21 at 04:07
Sorry, can you see my code and image attached? The current code i shown above is "test, I would like the Comment to show a formatted html, "test" <---hyperlink to # Can you help me to modify? – tea Apr 27 '21 at 04:34

How can i print variable to formatted html in the javascript?

2 Answers2

References