javaScript insetAdjacentHTML() not working

Question

all I was trying to use insertAdjacentHTML() to create elements and add events by using addEventListener().I don't think there was a logical problem in my code below, but it was not working (not console.log()ing)

My code was as below:

const END_POINT = "https://swapi.dev/api/people/"


let ul = document.querySelector("ul")
fetch(END_POINT)
.then(response => response.json())
.then(data => {
    let people = data.results
    console.log(people)
    people.forEach((person, i) => {
        let html = `
        <li><a href=${person.homeworld} target="_blank">${person.name}</a></li>
        `
        ul.insertAdjacentHTML("afterbegin", html)
        function expandDetails(ev) {
            ev.preventDefault()
            console.log("fef")
            console.log("ev.target", ev.target)
        }
        let a = document.querySelectorAll("a")[i]
        a.addEventListener("click", expandDetails)

    })
})

<ul id="list"></ul>

I have a feeling it's about a delay of something and a setTimeout() should be added somewhere. Any advice?

`let a = document.querySelectorAll("a")[i]` would only guaranteed to work if there's no `` in the document before `ul` - consider `ul.querySelectorAll` isntead ... actually, that won't work either since you're inserting the html at the beginning all the time ... so the new `a` is always the first — Bravo, Jul 04 '22 at 08:47
@Bravo Thanks for the reply, but yeah I knew I could achieve it with (document.createElement), but i just wanted to give it a try for other solutions/options. — Hai Na Zheng, Jul 04 '22 at 08:52

score 2 · Answer 1 · answered Jul 04 '22 at 08:55

Just do it outside your loop:

const END_POINT = "https://swapi.dev/api/people/"


let ul = document.querySelector("ul")
fetch(END_POINT)
.then(response => response.json())
.then(data => {
    let people = data.results
    people.forEach((person, i) => {
        let html = `
        <li><a href=${person.homeworld} target="_blank">${person.name}</a></li>
        `
        ul.insertAdjacentHTML("afterbegin", html)

    })
    document.querySelectorAll("a").forEach(a => a.addEventListener('click', expandDetails))
    
})

function expandDetails(ev) {
    ev.preventDefault()
    console.log("ev.target", ev.target)
}

<ul id="list"></ul>

Andy · Answer 2 · 2022-07-04T14:06:05.920

Instead of listeners on all list items use event delegation. Attach one listener to the ul element and have that listen to events from its child elements as they "bubble up" the DOM. When expandDetails is called check that the event is from an anchor in a list item, and then log the result.

const END_POINT = "https://swapi.dev/api/people/"

const ul = document.querySelector("ul")
ul.addEventListener('click', expandDetails);

function expandDetails(e) {
  if (e.target.matches('li a')) {
    e.preventDefault();
    console.log(e.target.textContent);
  }
}

fetch(END_POINT)
  .then(response => response.json())
  .then(data => {
    const people = data.results;
    people.forEach((person, i) => {
      const html = `
        <li>
          <a href=${person.homeworld}>${person.name}</a>
        </li>
        `
      ul.insertAdjacentHTML("afterbegin", html)
    });
  });

<ul id="list"></ul>

Another thing you might consider is creating an array of HTML and then joining it up before adding it to the DOM. That way you're only calling insertAdjacentHTML once after all the HTML has been compiled rather on every iteration of the loop. (Note, however, that this version prints the list items in the opposite order to the previous example which may or may not be an issue. I've also used async/await to make the code a little neater.)

const END_POINT = "https://swapi.dev/api/people/"

const ul = document.querySelector("ul")
ul.addEventListener('click', expandDetails);

function expandDetails(e) {
  if (e.target.matches('li a')) {
    e.preventDefault();
    console.log(e.target.textContent.trim());
  }
}

async function main() {
  const response = await fetch(END_POINT);
  const { results } = await response.json();
  const html = results.map(person => {
    return `
      <li>
        <a href=${person.homeworld}>
          ${person.name}
        </a>
      </li>
      `
  });
  ul.insertAdjacentHTML('beforeend', html.join(''));
}

main();

<ul id="list"></ul>

You forgot e.preventdefault(). – Wimanicesir Jul 04 '22 at 13:53 — Wimanicesir, Jul 04 '22 at 13:53

javaScript insetAdjacentHTML() not working

2 Answers2