How to make the icon show on each <li> 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);

Answer 1

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.

How to make the icon show on each <li> element

Question

1 answers

solution1
0 ACCPTED 2020-12-03 12:58:14

How to make the icon show on each <li> element

Question

1 answers

solution1 0 ACCPTED 2020-12-03 12:58:14

solution1
0 ACCPTED 2020-12-03 12:58:14