CODEWITHSUNDEEP
javascriptjquery
Ron
Ron

Reputation: 15

jQuery dynamically add content to div

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!

Upvotes: 0

Views: 55

Answers (2)

trincot
trincot

Reputation: 350127

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)
    )
);

Upvotes: 1

tomaaato-xyz
tomaaato-xyz

Reputation: 36

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)

Upvotes: 1

Related Questions