jQuery dynamically add content to div

Question

What I'm trying to do is add for each items in a xml file their content to a html page. I'm trying to make it so that every item content is inside an <article> tag. However, It's my first time using jQuery and my end result is not what I want.

let $items = $(xmlContent).find("item");

$items.each(function() {
  let title = $(this).find('title').text();
  let date = $(this).find('pubDate').text();
  let link = $(this).find('link').text();
  let guid = $(this).find('guid').text();
  let photo = $(this).find('media').html();
  $("#world").append("<article></article>", [$("<a>", {
    href: link
  }) + ("<h3>" + title + "</h3>")]);

This is what the end result currently is:

<article></article>
[object Object]
<h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3>

And what I want it to become:

<article> <a href= myLink <h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3> </a> </article>

I want to apply my link so that everywhere the user click on the content it goes to the link. Hopefully you can guide me. Thanks!

tomaaato-xyz · Accepted Answer · 2019-11-30 19:39:44Z

1

You can build your article element step by step.

Create 'article' as an element, then create your 'a' element. Append the 'h3' element to the 'a' element before appending 'a' to 'article', and then 'article' to '#world'.

let article = $("<article></article>")
let a = $("<a></a>", {href: link})
a.append("<h3>" + title + "</h3>")
article.append(a)
$("#world").append(article)

answered Nov 30, 2019 at 19:39

tomaaato-xyz

365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

trincot · Accepted Answer · 2019-11-30 19:42:39Z

1

You're not using append as described in the documentation -- see the type of arguments you can pass.

Maybe you intended this:

$("#world").append(
    $("<article>").append(
        $("<a>", { href: link }), 
        $("<h3>").text(title)
    )
);

answered Nov 30, 2019 at 19:42

trincot

357k38 gold badges282 silver badges338 bronze badges

Collectives™ on Stack Overflow

jQuery dynamically add content to div

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related