More than one value for the same appendchild()

Question

How can I concatenate two values in the same appendchild?

For example, transform this

li.appendChild(_nomeAutorTexto);
li.appendChild(_sobrenomeAutorTexto);

therein

li.appendChild(_nomeAutorTexto + espaço + _sobrenomeAutorTexto);

---

Here the whole code:

const listaTextos = document.querySelector("#lista-textos");

function renderLista (doc) {

    let li = document.createElement("li");
    let _nomeAutorTexto = document.createElement("span");
    let _sobrenomeAutorTexto = document.createElement("span");
    let _nomeTexto = document.createElement("span");
    let _livroTexto = document.createElement("span");

    li.setAttribute("data-id", doc.id);
    _nomeAutorTexto.textContent = doc.data().nomeAutorTexto;
    _sobrenomeAutorTexto.textContent = doc.data().sobrenomeAutorTexto;
    _nomeTexto.textContent = doc.data().nomeTexto;
    _livroTexto.textContent = doc.data().livroTexto;

    li.appendChild(_nomeAutorTexto);
    li.appendChild(_sobrenomeAutorTexto);
    li.appendChild(_nomeTexto);
    li.appendChild(_livroTexto);

    listaTextos.appendChild(li);

}

---

This is a simple matter of syntax or do I have to do some more sophisticated trick?

Answer 1

Well, I think it’s been explained that appendChild accepts only one argument, and concatenating objects also does not work, because any object concatenation results in a string, which does not serve as a parameter for appendChild.

However, there is the option to create a function, or a method that does what you want. You can even extend the class Node. For example, if we add the method appendChildren:

Object.defineProperty(Node.prototype, 'appendChildren', {
    configurable: true,
    value: function(...children) {
        for (const child of children) {
            this.appendChild(child);
        }

        return this;
    }
});

We can do what we want now using this method:

li.appendChildren(_nomeAutorTexto, _sobrenomeAutorTexto, _nomeTexto, _livroTexto);

Answer 2

The solution that served me was the following:

1) I have created spam for first and last name:

let _nomeCompletoAutorTexto = document.createElement("span")

2) The content of this spam is the concatenation of two BD fields:

_nomeCompletoAutorTexto.textContent = doc.data().nomeAutorTexto + ' ' + doc.data().sobrenomeAutorTexto;

3) I have created a new appendchild() for these:

li.appendChild(_nomeCompletoAutorTexto);

4) Happy ending.

Thank you all!

Answer 3

"- How can I concatenate two values in the same appendchild?"

It cannot. It is not the correct use of the method.

According to the documentation, this is the method syntax:

node.appendChild(node)

Where node are the "we" of objects.

This method expects a single object to be rendered/moved to after the last child of the object in question.

Following his example, _nomeAutorTexto and _sobrenomeAutorTexto are object nodes. Therefore, you cannot concatenate directly into the method call expecting it to render/move both objects.

Recommended reading: HTML DOM appendchild() Method

Answer 4

It follows a way to implement if I understand the question correctly:

var li = document.createElement('LI');           // cria uma tag li
var span1 = document.createElement('span');      // cria a primeira tag span
span1.textContent = 'TEXTO 02';                  // seta um texto na span 01
var span2 = document.createElement('span');      // cria a segunda tag span
span2.textContent = ' TEXTO 03';                 // seta um texto na span 02
var lista = document.getElementById('lista');    // referencia a ul

li.appendChild(span1);                           // adiciona a span 01 no final da ul
li.appendChild(span2);                           // adiciona a span 02 no final da span 01

lista.appendChild(li);                           // adiciona os textos na ul

<ul id="lista">
  <li>TEXTO 01</li>
</ul>