Как перевести ниже указаний код с jQuery на чистый JS (частично переведен)?

Question

[Anton Borovyk]

1)

if (activeNote) {
        
      $('#' + activeNote)[0].children[0].innerHTML = title;
      $('#' + activeNote)[0].children[1].innerHTML = created.toLocaleString("en-US");
      $('#' + activeNote)[0].children[2].innerHTML = body;
      $('#' + activeNote)[0].style.backgroundColor = color;
          activeNote = null;
}

2)

$('#listed').append('<div id="note' + id + '" style="background-color: ' + color + '"><div class="list-title">' + title + '</div> <div class="list-date">' + created.toLocaleString("en-US") + '</div> <div class="list-text">' + body + '</div> </div>');

3)

if (activeNote) {
      /**/$('#' + activeNote)[0].remove();
      activeNote = null;}

4)

var titleSel = $('#' + id)[0].children[0].innerHTML;
    var bodySel = $('#' + id)[0].children[2].innerHTML;

Answer 1

[Somewhere Intech]

1)

if (activeNote) {
  const note = document.getElementById(activeNote)
  note.children[0].innerHTML = title;
  note.children[1].innerHTML = created.toLocaleString("en-US");
  note.children[2].innerHTML = body;
  note.style.backgroundColor = color;
  activeNote = null;
}

2)

document.getElementById('listed')
  .append(document.createTextNode(title + ' ' + created.toLocaleString("en-US") + ' ' + body + ' '));

3)

if (activeNote) {
  let note = document.getElementById(activeNote);
  note.parentElement.removeChild(note);
   activeNote = null;
}

Answer 2

[Хороший UI]

es6:

// 1)

if (activeNote) {
  const node = document.querySelector(`#${activeNote}`);

  node.children[0].innerHTML = title;
  node.children[1].innerHTML = created.toLocaleString('en-US');
  node.children[2].innerHTML = body;
  node.style.backgroundColor = color;

  activeNote = null;
}

// 2)

const node = document.querySelector('#listed');
node.appendChild(document.createTextNode(`${title} ${created.toLocaleString('en-US')} ${body} `));

// 3)

if (activeNote) {
  const node = document.querySelector(`#${activeNote}`);
  node.parentNode.removeChild(node);
  activeNote = null;
}

// 4)

const nodes = document.querySelector(`#${id}`);
const titleSel = nodes.children[0].innerHTML;
const bodySel = nodes.children[2].innerHTML;

Answer 3

[Rsa97]

youmightnotneedjquery.com