How to make the icon show on each
element

Question

I've got this problem. So my site creates a new object every time when I type a new word into the input tag, then the object is displayed in a list and I want to have a trashcan icon somewhere in the same line as the object text. This is where I left over and the code displays not the icon, but the whole icon code. Any ideas? My code:

const alert = document.querySelector('#alert');

let words = [];

const addWord = (ev) => {
  ev.preventDefault();

  if (
    document.getElementById('input-first-text').value !== '' &&
    document.getElementById('input-second-text').value !== ''
  ) {
    let word = {
      id: Date.now(),
      homeLanguageWord: document.getElementById('input-first-text').value,
      foreignLanguageWord: document.getElementById('input-second-text').value,
    };

    words.push(word);
    document.getElementById('input-first-text').value = '';
    document.getElementById('input-second-text').value = '';

    console.warn('added', { words });

    if (words.length != 0) {
      let para = document.createElement('li');
      let node = document.createTextNode(
        words[words.length - 1].homeLanguageWord + ' ' + words[words.length - 1].foreignLanguageWord,
      );
      para.appendChild(node);
      let nodeIcon = document.createTextNode(`<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
      <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
    </svg>`);
      para.appendChild(nodeIcon);

      var element = document.getElementById('word-list');
      element.appendChild(para);
    }
    document.getElementById('alert').innerHTML = '';
  } else {
    document.getElementById('alert').innerHTML = 'You need to write something!';
  }
};

document.getElementById('submitbtn').addEventListener('click', addWord);

Take a look at this _amazing_ answer: https://stackoverflow.com/a/14070928/10915534 — Ahmed Ali, Dec 03 '20 at 11:56
I tried changing to createElementNS(), but it still isn't working for me — BigDo777, Dec 03 '20 at 12:17

George Pandurov · Accepted Answer · 2020-12-04T10:43:26.140

You can't create svg element with createTextNode, it is only meant to be used for simple text but you can try to use this:

const wrapper = document.getElementById('wrapper')
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const path1=document.createElementNS("http://www.w3.org/2000/svg", "path");
const path2=document.createElementNS("http://www.w3.org/2000/svg", "path");

path1.setAttribute("d", "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z");
path2.setAttribute("d", "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z");
path2.setAttribute("fill-rule", "evenodd")

svg.appendChild(path1)
svg.appendChild(path2)

const listElements = wrapper.querySelectorAll('li')
for (let element of listElements) {
    element.appendChild(svg.cloneNode(true))
}

li {
 display: flex;
 align-items: center;
}

span {
  display: inline-block;
  height: 24px;
  padding: 4px;
}

svg {
  width: 24px;
  height: 24px;
}

<html>
<body>
<div id="wrapper">
  <ul>
    <li><span>A</span></li>
    <li><span>B</span></li>
    <li><span>C</span></li>
  </ul>
</div>
</body>
</html>

Just update the code with the proper selector for your code.

This works well, but i got another problem now, every time i create a new object and display it, the svg gets added only to the first object, how could I fix that? — BigDo777, Dec 03 '20 at 13:52
I guess the problem is that you can't use the same element more than once. You can try using `wrapper.appendChild(svg.cloneNode(true))` to clone the element so this way you will be using new element for every call to appendChild. — George Pandurov, Dec 03 '20 at 14:14
i dont think that's the problem, because it didn't change anything, maybe you know a different way of how to do this? I'm pretty new to programming with JS, so help would be very appreciated — BigDo777, Dec 03 '20 at 16:09

How to make the icon show on each element

1 Answers1

How to make the icon show on each
element