如何 append 图像和锚标签

Question

I am writing a function where I dynamically create various divs, containing an image and an anchor tag and then append them to an existing div. Now, they're being appended alright, the problem, is that something is wrong with both the images and the anchor tags.

The anchors cannot be clicked on. They are just showing as blue text, not a link. And the image is not being displayed. The latter can't be caused because of incorrect file path.

Here is the Javascript/JQuery part:

 $.ajax({
          
            url: 'Home/GetComments',
            data: { postId: id },
            dataType: 'json',
            cache: false,
            success: function (result) {
                for (var i = 0; i < result.length; i++) {
                    var div = document.createElement("Div");
                    div.setAttribute('class', 'comment');

                    var image = document.createElement("img");
                    var imageSource = "~/images/" + result[i].userImage;
                    image.src = imageSource;
                    div.appendChild(image);

                    var a = document.createElement('a');
                    var linkText = document.createTextNode(result[i].userName);
                    a.appendChild(linkText);
                    a.setAttribute('asp-action', 'UserProfile');
                    a.setAttribute('asp-route-name', result[i].userName);
                    
                    div.appendChild(a);

                    $("#" + stringId).append(div);
                }      },
        });

And this is the response from the controller:

 public JsonResult GetComments(long postId)
        {
            var comment1 = new Comment()
            {      
                Id = 1,
                UserName = "User1",
                UserImage = "Udklipre.PNG"          
            };
            var comment2 = new Comment()
            {
                Id = 2,
                UserName = "User2",
                UserImage = "Udklipre.PNG"
            };

            Comment[] comments = { comment1, comment2 };
            return Json(comments);
        }

Answer 1

Anchor tags need a hyperlink reference ( href ) in order for the browser to understand them as clickable, which is why you see href="#" so frequently. If you don't want the hash in the url when you click on it, you can use href="javascript: void(0)" instead.

a.setAttribute('href', '#');

Answer 2

You must add the 'href' attribute to make it look clickable. Here you have two options:

a.href = 'javascript:void(0)';
// or
a.setAttribute('href', 'javascript:void(0)');

Answer 3

Here is a worked demo(tag-helper such as asp-action cannot be used in ajax):

HomeController:

public IActionResult Add() {
            return View();
        }
        public JsonResult GetComments(long postId) {
            var comment1 = new Comment()
            {
                Id = 1,
                UserName = "User1",
                UserImage = "gif.gif"
            };
            var comment2 = new Comment()
            {
                Id = 2,
                UserName = "User2",
                UserImage = "t-shirt.jpg"
            };

            Comment[] comments = { comment1, comment2 };
            return Json(comments);
        }
        public ActionResult UserProfile(string username) {
            return View("Add");
        }

Add.cshtml:

 <button onclick="add()">add</button>
<div id="stringId"></div>
@section scripts {
    <script type="text/javascript">
        function add() {
            $.ajax({

                url: 'GetComments',
                data: { postId: 1 },
                dataType: 'json',
                cache: false,
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        var div = document.createElement("Div");
                        div.setAttribute('class', 'comment');
                        var image = document.createElement("img");
                        var imageSource = "/images/" + result[i].userImage;
                        image.src = imageSource;
                        div.appendChild(image);

                        var a = document.createElement('a');
                        var linkText = document.createTextNode(result[i].userName);
                        a.appendChild(linkText);
                        a.href = "UserProfile?username=" + result[i].userName;
                        div.appendChild(a);

                        $("#stringId").append(div);
                    }
                },
            });
        }
    </script>

}

result: