Insert array of elements into the DOM? [duplicate] - javascript

This question already has answers here:
Javascript - efficiently insert multiple HTML elements
(3 answers)
Closed 5 years ago.
I have an array of elements:
const itemCurrent = document.createElement('div');
const itemNext = document.createElement('div');
Ive created an array of them:
const itemsAll = [itemCurrent, itemNext];
How can I insert all of them into the body of my page?

You may simply use .append() to append multiple DOM nodes all at once as follows;
var divs = Array.from({length:10}) // lets make an array of 10 divs
.map(function(_,i){
var el = document.createElement('div');
el.textContent = `I am div # ${i}`;
return el;
});
document.body.append(...divs);
In fact the above snippet has some redundany since Array.from() bears built in mapping. So the following rephrased code would be more reasonable.
var divs = Array.from( {length:10} // lets make an array of 10 divs
, function(_,i){ // and map it accordingly
var el = document.createElement('div');
el.textContent = `I am div # ${i}`;
return el;
}
);
document.body.append(...divs);

To add the elements to the body, you need to append them to the body of your document. This is done by using the appendChild(element) function :
// looping through your array :
for (let i=0;i<itemsAll.length;i++) {
// appending your elements to the body :
document.body.appendChild(itemsAll[i]);
}

To recollect what others have said:
in JS, you iterate over an array with array.forEach which takes one argument - a function that will be called on all the elements of the array sequentially
to append (add at the end) an element to the DOM (body of the page) you call document.body.appendChild which takes the element to be added as an argument
Code you need then becomes
itemsAll.forEach(function (element, index, array) {
document.body.appendChild(element);
})
or (using ES6 syntax)
itemsAll.forEach(el => document.body.appendChild(el))

Iterating over array and appending each using appendChild:
itemsAll.forEach(el => {
document.body.appendChild(el)
})

Related

Split a string in javascript [duplicate]

This question already has an answer here:
Check if an HTML string only has element children (or whitespace between elements) and no element is unknown
(1 answer)
Closed 1 year ago.
I need to split a string according to the next idea:
const strin = 'test <br><span>test</span> <div>aa</div>8'.split(/<\ *>/i)
console.log(strin)
So, the expected output is next:
['test','<br>', '<span>test</span>', '<div>aa</div>', '8']
As #sebastian-simon mentioned, "split" HTML with only regular expression is impossible. The best solution is use a real HTML parser (already shipped with your browser, if you are using Node.js, you can use JSDOM).
var str = 'test <br><span>test</span> <fake></fake> <div><p>aa</p></div>8';
var container = document.createElement("div");
container.innerHTML = str; // use a HTML element to parse HTML
// If you need to work with nested tag, you should traverse childNodes and their childNodes by yourself
// childNodes included TextNode, children not.
// [...container.childNodes] convert container.childNodes to a normal array
// so we can .map over it
var elmList = [...container.childNodes];
var tags = elmList
// if elm is a TextNode, elm.outerHTML is undefined
// then we use elm.textContent instead
.map(elm => elm.outerHTML ?? elm.textContent)
.map(elm => elm.trim()) // remove whitespaces
.filter(elm => elm); // remove empty items
console.log(tags)

what happens with the variable when appended with apprendChild [duplicate]

Trying to create DOM element "gota" from template. First I create template:
function htmlToElement(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.firstChild;
}
let gota = htmlToElement('<div class="gota"><div class="gota-rastro"><div class="rastro"></div></div><div class="gota-cabeza"></div></div>');
Second, I create collection from CSS class "gotea" and iterate for each element to append template:
function gotear() {
let gotas = document.getElementsByClassName('gotea');
for (let i = 0; i < gotas.length; i++) {
gotas[i].appendChild(gota);
}
}
gotear();
This just add "gota" element to a only one random element of the collection:
How can I add this template to ALL elements in a collection?
You're only creating one element. Then you're using that same element with appendChild multiple times, so you move it from one parent to the next.
You can clone the element with cloneNode(true) and append the clone:
gotas[i].appendChild(gota.cloneNode(true));
Side note: You can use insertAdjacentHTML rather than htmlToElement to insert elements based on that HTML directly:
function gotear() {
let gotas = document.getElementsByClassName('gotea');
for (let i = 0; i < gotas.length; i++) {
gotas[i].insertAdjacentHTML(
"beforeend",
'<div class="gota"><div class="gota-rastro"><div class="rastro"></div></div><div class="gota-cabeza"></div></div>'
);
}
}
gotear();
Granted, that means parsing the HTML repeatedly. But if not useful here, it might be useful elsewhere. (There's also insertAdjacentText.)

Javascript Split innerText and wrap with a Span

I'm trying to get the inner text of a header, then I would like to split the characters, then wrap each character in a span. I tried previously using insertBefore but I couldn't get it to work.
Here is my current code, which so far just logs each character.
// Title Split
const titleSplit = document.querySelectorAll('.title-split');
// Each El
Array.prototype.forEach.call(titleSplit, function(el, i) {
let innerText = el.innerText;
el.setAttribute('data-word', innerText);
const chars = innerText.split('');
Array.prototype.forEach.call(chars, function(el, i) {
console.log(el);
});
});
I specifically don't want any jQuery solutions. I'm trying to reverse learn Javascript to become more efficient. Any advise would be great. I tried putting in an insertBefore in the chars forEach but it just kept saying undefined.
document.querySelectorAll(...) return a NodeList which contains a method named .forEach(). So Instead of
Array.prototype.forEach.call(titleSplit, function(el, i) {
...
}
You can just do
titleSplit.forEach(...);
Similarly, you can just do
chars.forEach(...);
because chars is an array and you can call .forEach() method on an array.
Now coming to your question, once you have the chars array, you can use .map() method instead of .forEach(), to get a new array that contains strings where each character is wrapped by span tags.
const result = chars.map(c => `<span>${c}</span>`);
Finally, you need to iterate over the result array and insert its elements in the DOM.
result.forEach(el => document.body.append(el));
I have used document.body as the parent element of all the span elements. You can use any element that needs to be the parent element of all the span elements.
You can use map() inside the forEach() loop to construct the result with span. Also I will recommend you not to use innerText as a variable name as it is property name which can lead to some confusion:
// Title Split
const titleSplit = document.querySelectorAll('.title-split');
// Each El
Array.prototype.forEach.call(titleSplit, function(el, i) {
let ElText = el.innerText;
el.setAttribute('data-word', ElText);
const chars = ElText.split('');
var res = chars.map(function(el, i) {
return `<span>${el}</span>`;
}).join('');
el.innerHTML = res;
});
span{
border: 1px solid red;
padding: 2px;
}
<div class="title-split">Hello there</div>
const myHeader = querySelector('query my header please');
const spans = myHeader.innerText
.split('')
.map((char) => `<span>${char}</span>`)
.join('');
document.querySelector('query element to put them').innerHTML = spans;
// OR
document.querySelector('query element to put them').insertAdjacentHTML('beforeend', spans);
// etc.

Problems when parsing nested html tags from string

I have this code that's to parse a string into html and display the text of each element.
That's working good except when I have nested tags for example <div><p>Element 1</p><p>Element 2</p></div>. In this case, the code displays <p>Element 1</p><p>Element 2</p>.
How can I do to get each tags one after the other ? (Here I want Element 1 and then Element 2)
Here's the code :
let text = new DOMParser().parseFromString(stringHtml, 'text/html');
let textBody = text.body.firstChild;
while (textBody) {
alert(textBody.innerHTML);
// other actions on the textBody element
textBody = textBody.nextSibling;
}
Thanks for helping me out
It sounds like you want a recursive function that prints the textContent of itself, or of its children, if it has children:
const stringHtml = '<div><p>Element 1</p><p>Element 2</p></div><div><p>Element 3</p><p>Element 4</p></div>';
const doc = new DOMParser().parseFromString(stringHtml, 'text/html');
const showElms = parent => {
const { children } = parent;
if (children.length) Array.prototype.forEach.call(children, showElms);
else console.log(parent.textContent);
}
showElms(doc.body);
That's assuming you want to iterate over the actual elements. If you want all text nodes instead, then recursively iterate over the childNodes instead.

Assigning javascript array elements class or id for css styling

I'm trying to assign class and id to items in an array I created in js and input into my html. I'm doing this so I can style them in my stylesheet. Each item will not be styled the same way.
I'm a beginner so trying to keep it to code I can understand and make it as clean as possible, i.e. not making each of these items an element in the html.
This part works fine:
var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
var letters = pool.join('');
document.getElementById('key').innerHTML = letters;
This part not so much:
var char1 = letters[1];
char1.classList.add('hoverRed');
There is a similar question here that didn't work for me, it just showed [object][object][object] when I ran it.
Your code attempts to apply a style to an array element, but CSS only applies to HTML. If you wish to style one character in a string, that character must be wrapped in an HTML element (a <span> is the best choice for wrapping an inline value).
This code shows how to accomplish this:
var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
var letters = pool.join('');
// Replace a specific character with the same character, but wrapped in a <span>
// so it can be styled
letters = letters.replace(letters[1], "<span>" + letters[1] + "</span>");
// Insert the letters string into the div
var theDiv = document.getElementById('key');
// Inject the string into the div
theDiv.innerHTML = letters;
// Get a reference to the span:
var theSpan = theDiv.querySelector("span");
// Add the style to the <span> that wraps the character, not the character itself
theSpan.classList.add('hoverRed');
.hoverRed {
color:red;
}
<div id="key"></div>
And, this snippet shows how you could apply CSS to any letter:
var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U'];
// Leave the original array alone so that it can be manipulated any way needed
// in the future, but create a new array that wraps each array element within
// a <span>. This can be accomplished in several ways, but the map() array method
// is the most straight-forward.
var charSpanArray = pool.map(function(char){
return "<span>" + char + "</span>";
});
// Decide which character(s) need CSS applied to them. This data can come from anywhere
// Here, we'll just say that the 2nd and 5th ones should.
// Loop through the new array and on the 2nd and 5th elements, apply the CSS class
charSpanArray.forEach(function(element, index, array){
// Check for the particular array elements in question
if(index === 1 || index === 4){
// Update those strings to include the CSS
array[index] = element.replace("<span>","<span class='hoverRed'>");
}
});
// Now, turn the new array into a string
var letters = charSpanArray.join('');
// For diagnostics, print the string to the console just to see what we've got
console.log(letters);
// Get a reference to the div container
var theDiv = document.getElementById('key');
// Inject the string into the div
theDiv.innerHTML = letters;
.hoverRed {
color:red;
}
<div id="key"></div>
You're on the right track, but missed one key thing.
In your example, pool contains characters. When you combine them using join, you get a string. Setting that string as the innerHTML of an element doesn't give the string super powers, it's still just a string.
In order to get a classList, you need to change your letters into elements and work with them.
I've included an es6 example (and a working plunker) of how to get the functionality you want below.
let pool = ['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
const letterToElement = function(char) {
//Create the element
let e = document.createElement("SPAN");
//Create the text node
let t = document.createTextNode(char);
//Put the text node on the element
e.appendChild(t);
//Add the class name you want
e.className += "hoverRed";
return e;
};
//create your elements from your pool and append them to the "key" element
window.onload = function() {
let container = document.getElementById("key");
pool.map(l => letterToElement(l))
.forEach(e => container.appendChild(e));
}
https://plnkr.co/edit/mBhA60aUCEGSs0t0MDGu

Categories

Resources