Javascript: Add together literal HTML results in loop

Question

New to JS. All of the questions I could find with similar titles to mine were a bit too complicated for me to understand.

Simply put, I am trying to loop through an array and return one result at the end that essentially adds/concatenates all of the values of the array together.

However, I can't seem to get it to work, as the items in the array are blocks of HTML code, rather than simple strings or numbers. Here's a dumbed-down version.

HTML:

Some text 1.
No class.
Some text 2.
No class.
Some text 3.

I am trying to figure out a way to end up with a template literal of this code:

Some text 1.
Some text 2.
Some text 3.

So that I can inject the entire thing as the innerHTML of another element on a different page.

Started with this JS:

articleArray = document.querySelectorAll('.wrapper').outerHTML;
console.log(articleArray)
// This will return an array with the full HTML of the 3 "wrapper" articles as each item

Then tried to create a loop that will take the full HTML of item 1 on first loop and set it as something like an accumulator value. Then on second loop, it would take the full HTML of item 2 and concatenate it directly to item 1, and that would be the new accumulator value. And so on.

I have far more than 3 items for what I'm applying this to in real life, otherwise I could just do something like articleArray[0] + articleArray[1] + articleArray[2].

I tried a million things, but here were the closest attempts:

Logging

var articleArray = document.querySelectorAll('.wrapper').outerHTML;
for (i = 0; i < searchWrappers.length; i++) {
  searchWrapper = articleArray[i];
  console.log(searchWrapper);
}
// Console log brought back 3 objects, but I need to combine them

Concatenating

var articleArray = document.querySelectorAll('.wrapper').outerHTML;
var searchStr = ''
for (i = 0; i < articleArray.length; i++) {
  itemHTML = articleArray[i];
  fullString = searchStr += itemHTML;
  console.log(fullString);
}
// This did concatenate the 3 items, but only as:
// [object HTMLElement][object HTMLElement][object HTMLElement]
// and not the actual HTML

Concatenating and logging

const articleArray = document.querySelectorAll('.wrapper').outerHTML;
const sum = articleArray.reduce((accumulator, value) => 
  $(accumulator).concat($(value)));
console.log(sum);
// This brought back a normal array of the 3 items again

Any help appreciated!

Edit: Thanks for all your responses! I am going to go through them now and testing your solutions on my real code to see what works best.

user_13991219 · Answer

This should help you:

function contains(selector, text) {
    var elements = document.querySelectorAll(selector);
    return [].filter.call(elements, function (element) {
        return RegExp(text).test(element.textContent);
    });
}

var articleArray = contains(".wrapper", 'menu');
// var articleArray = contains(".wrapper", /menu/i); // for case-insensitive
let templateLiteral = ``;
articleArray.forEach(function (article) {
    templateLiteral += article.outerHTML + '
';
})
console.log(templateLiteral);

article {
    display: none;
}




    
    Title


Some text 1. menu
No class.
Some text 2. menu
No class.
Some text 3.

The basic idea is to loop through each HTML element and get add the outerHTML of the element to the template literal.

Edit: Thanks to this answer, it helps me achieve the desired effect of finding a vanilla js replacement for :contains in jQuery.

user_1762224 · Answer

You could map the elements to their outer HTML and then join the results.

const htmlString = [...document.querySelectorAll('.wrapper')]
  .map(({ outerHTML }) => outerHTML.trim())
  .join('
');

console.log(htmlString);

.as-console-wrapper { top: 0; max-height: 100% !important; }

.wrapper { display: none; }


  Some text 1.

No class.

  Some text 2.

No class.

  Some text 3.

user_8539736 · Answer

You can create template in the following way, via concatenating each article outerHTML:

var articleArray = document.querySelectorAll('.wrapper');
var template = '';

articleArray.forEach(article => template += article.outerHTML);

console.log(template)

Example in jsbin

if you need to check for extra word (for example 'menu') inside each article, you could add the following condition:

articleArray.forEach(article => {
  if (article.innerText.includes('menu')) {
     template += article.outerHTML.trim() 
  }
});

user_7158959 · Answer

You can also fetch only wrappers and push them in new element to make a template:

let result = document.createElement("div")
document.querySelectorAll('.wrapper').forEach(e =>
  result.insertAdjacentElement("beforeend", e))

console.log(result.innerHTML)


  Some text 1.

No class.

  Some text 2.

No class.

  Some text 3.

Then you can use result.innerHTML to transfer all.

Also see: Element.insertAdjacentElement()

EDIT: You will actuality need to use cloning so wrappers does not get removed from DOM:

let result = document.createElement("div")

document.querySelectorAll('.wrapper').forEach(e => {
  let cln = e.cloneNode(true)
  result.insertAdjacentElement("beforeend", cln)
})

console.log(result.innerHTML)


  Some text 1.

No class.

  Some text 2.

No class.

  Some text 3.

user_383904 · Answer

DOMParser is the right tool if you really have:

"the items in the array are blocks of HTML code"

// I have an array of elements as HTML strings:
const elArray = [
  `Some text 1.`,
  `No class.`,
  `Some text 2.`,
  `No class.`,
  `Some text 3.`,
];

// DOMParser is the right tool for the job!
const DOC = new DOMParser().parseFromString(elArray.join(""), "text/html");

// Use selectors as normal!
const ELs = DOC.querySelectorAll(".wrapper");

// DEMO TIME: retrieve elements and finally
// place them somewhere in the app
document.querySelector("#test").append(...ELs);

If instead you actually have a NodeList of Elements:

// I am trying to figure out a way to end up
// with a template literal!

const ELs = document.querySelectorAll("article.wrapper"); 
const literal = [...ELs].reduce((s, EL) => s + EL.outerHTML, "");
console.log(literal);

Some text 1.
No class.
Some text 2.
No class.
Some text 3.

Depends on what you're actually building, you need to be aware that when taking items from the DOM and converting them to string you might lose any Element Properties or Events (like "click" etc) assigned to those elements.

In such case you might just want to perhaps simply use Element.append(...myNodesList) to move them to your desired new location in the DOM:

// Let's say they have some event listeners already assigned:
document.querySelectorAll(".wrapper").forEach(EL => EL.addEventListener("click", (ev) => {
  console.log(ev.currentTarget.textContent);
}));

// Get your elements
const ELs = document.querySelectorAll("article.wrapper"); 
// And simply move them somewhere else!
document.querySelector("#test").append(...ELs); 
// Click events are preserved!!

#test { padding: 10px; background: #eee; }

CLICK ME! 1.
No class.
CLICK ME! 2.
No class.
CLICK ME! 3.

Javascript: Add together literal HTML results in loop

5 Answers