How do I avoid repeatedly typing methods that create nodes and append nodes?

Question

I have researched my question and not come up with any thing. I may be lacking the proper buzz words that relate to the question...

I have a method inside of an object that creates p elements and then appends them to an unorderedlist, it works fine, but I am not able to figure out how to clean up my code by not repeatedly typing document.createElement('p') or repeatedly typing node.appendChild('p') methods.

NOTE: I have omitted some parts of the code that would show the functionality but I think the point can still be made for my question.

When typing out my code I either end up with multiple vars holding document.createElement('p') as you see with the pEl1, pEl2, and PEl3.

var totalCompletedTodos = 0,
    totalRemainingTodos = 0,
    todosUl = document.querySelector('ul'),
    todosLi = todosUl.appendChild(document.createElement('li')),
    pEl1 = document.createElement('p'),
    pEl2 = document.createElement('p'),
    pEl3 = document.createElement('p');

todosLi.appendChild(pEl1).textContent = "Toggle All ";
todosLi.appendChild(pEl2).textContent = "Completed: ";
todosLi.appendChild(pEl3).textContent = "Remaining: ";
todosLi.className = 'liInfoBar';
document.querySelector('.liInfoBar > p').className = "toggleAllButton";

Or I end up with continuously writing out multiple todosLi.appendChild(document.createElement('p')).textContent = "string";

var totalCompletedTodos = 0,
    totalRemainingTodos = 0,
    todosUl = document.querySelector('ul'),
    todosLi = todosUl.appendChild(document.createElement('li'));

todosLi.appendChild(document.createElement('p')).textContent = "Toggle All";
todosLi.appendChild(document.createElement('p')).textContent = "Completed: ";
todosLi.appendChild(document.createElement('p')).textContent = "Remaining: ";
todosLi.className = 'liInfoBar';
document.querySelector('.liInfoBar > p').className = "toggleAllButton";

AGAIN: I am not looking for help on functionality I am seeking help on how to produce reusable code to keep it minimal. As a beginner I am striving to dedicate time to producing minimal,clean, readable code as well as producing functionality which is why I am asking the question.

There may not be and an answer to what I am looking for and the only way is to continuously write that out but I find myself doing that a lot through my entire script and I feel like there would have to be a way.

Disclaimer: This is my first post on Stackoverflow hopefully I have worded my question in an understandable manner. If not I will also accept feedback on the topic of properly asking questions as well.

Thank you!

Answer 1

To repeat yourself less, make a function to which you can pass the parent, the created node's type, and whatever other properties you need. For example:

const append = (
  parent,
  childType,
  otherProps
) => {
  const child = parent.appendChild(document.createElement(childType));
  if (otherProps) Object.assign(child, otherProps);
  return child;
};
const ul = document.querySelector('ul');
const li = append(ul, 'li', { className: 'liInfoBar' });
append(li, 'p', { textContent: 'Toggle All' });
append(li, 'p', { textContent: 'Completed' });
append(li, 'p', { textContent: 'Remaining' });

.liInfoBar {
  background-color: yellow;
}

<ul></ul>

Or you can use one of the libraries that does this sort of thing as well. (but are you sure you want ps to be children of a li like that? as is, it looks a bit strange)

Answer 2

When you need the same thing done for multiple pieces of data, it is time for a loop!

const paragraphs = [
    'Toggle All',
    'Completed: ',
    'Remaining: '
];
paragraphs.forEach((text) => {
    todosLi.appendChild(document.createElement('p')).textContent = text;
});