I am trying to wrap the children of some elements in a new div and it's not working.
When I loop through the children of the element, the loop only loops through 1 element.
It wraps only one child and leaves the other.
Why?
var homepageRows = document.querySelectorAll(".span-12 > *");
homepageRows.forEach(function(row){
var newRow = document.createElement("div");
newRow.className = "wrapper-row";
row.childNodes.forEach(function(child) {
newRow.appendChild(child);
});
row.append(newRow);
})
<div class="col sqs-col-12 span-12">
<div class="row sqs-row">
<div>Wrap me in .wrapper-row</div>
<div>Wrap me in .wrapper-row</div>
</div>
<div class="row sqs-row">
<div>Wrap me in .wrapper-row</div>
<div>Wrap me in .wrapper-row</div>
</div>
<div class="row sqs-row">
<div>Wrap me in .wrapper-row</div>
<div>Wrap me in .wrapper-row</div>
</div>
</div>
One approach is as follows, with some comments in the code to try to explain:
let homepageRows = document.querySelectorAll(".span-12 > *");
homepageRows.forEach(function(row) {
let newRow = document.createElement("div");
// here we use the Element.classList API to add a new class-name:
newRow.classList.add("wrapper-row");
// the easiest change is to simply substitute `row.children` (which retrieves
// a list of the element-children of the current `row` element-node; we use
// an Array-literal and the spread operator to convert the iterable HTMLCollection
// into an Array in order to use Array.prototype.forEach() (there is a
// NodeList.prototype.forEach(), which is available to chain to the returned
// value of document.querySelectorAll(), but there is no
// HTMLCollection.prototype.forEach() which means it's easier to use the Array version.
[...row.children].forEach(function(child) {
newRow.appendChild(child);
});
row.append(newRow);
})
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 2px solid currentColor;
color: black;
padding: 1em;
margin: 1em;
}
.wrapper-row,
.wrapper-row * {
color: red;
}
<div class="col sqs-col-12 span-12">
<div class="row sqs-row">
<div>Wrap me in .wrapper-row</div>
<div>Wrap me in .wrapper-row</div>
</div>
<div class="row sqs-row">
<div>Wrap me in .wrapper-row</div>
<div>Wrap me in .wrapper-row</div>
</div>
<div class="row sqs-row">
<div>Wrap me in .wrapper-row</div>
<div>Wrap me in .wrapper-row</div>
</div>
</div>
References:
document.querySelectorAll().
Element.children.
Element.classList.
Node.childNodes.
NodeList.prototype.forEach().
The return value of querySelectorAll is already an array, namely the array of all elements of that match your query. So in your case, presumably, it's just one. What you want to do, I believe, is not to iterate over that array, but over all children of the first element (the one you want):
var homepageRows = document.querySelectorAll(".span-12 > *");
homepageRows.childNodes.forEach(function(row){
...
})
Related
This is my html. I want to create multiple div inside a sub class.
<div class="main">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
This is my script. I tried using for loop.
for(let x = 0; x < 5; x++){
let box = document.createElement("div");
document.getElementsByClassName("sub")[y].appendChild(box);
};
Note- At first loop will target sub(div) using indexes. Then loop will create 5 div inside each sub(div).
Is there a way to target all the div with same class name and create element without using loop?
Loop is required.
You can target divs with document.querySelectorAll(".main div.sub"). You need to iterate the result and appendChild.
MDN docs
Example
const nodeList = document.querySelectorAll(".main div.sub")
nodeList.forEach((node, index) => {
let box = document.createElement("div")
box.innerText = index;
node.appendChild(box);
});
.sub > div {
margin: 3px;
border: solid 1px green;
}
div.sub {
border-color: red;
}
<div class="main">
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
</div>
I would like to automate duplicating a class from a parent div to each separate child span based on a word.
As an example:
parent div contains the following classes: grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded
I would like to duplicate any classes within the parent div with the precursor "tag-" and place them into each separate child span. In this case, the parent div contains the classes with the initial "tag-" word: tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white
Some other parent divs will contain other classes that contain the initial word "tag-"
The "tag-" classes can be different in other parent divs but there will always be 5 "tag-" classes. As an example, a different parent div may contain the following classes with the initial "tag-" word: tag-smart-style tag-casual tag-modern tag-red tag-black tag-green
I already have a code snippet but this is locked in to 5 specific "tag-" classes. Here is the code:
let classMap = {
"tag-street-style": ".colour-tag-1",
"tag-slender": ".colour-tag-2",
"tag-navy": ".colour-tag-3",
"tag-grey": ".colour-tag-4",
"tag-white": ".colour-tag-5",
};
I would like the first "tag-" class identified within the parent div to be duplicated into "colour-tag-1" within the first child span.
Then I would like the second "tag-" class identified within the parent div to be duplicated into "colour-tag-2" within the second child span.
Then I would like the third "tag-" class identified within the parent div to be duplicated into "colour-tag-3" within the third child span.
Then I would like the fourth "tag-" class identified within the parent div to be duplicated into "colour-tag-4" within the fourth child span.
Then I would like the fifth "tag-" class identified within the parent div to be duplicated into "colour-tag-5" within the fifth child span.
$(document).ready( function() {
$(".grid-item .grid-meta-wrapper").each(function(e){
$(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span></div>');
});
let classMap = {
"tag-street-style": ".colour-tag-1",
"tag-slender": ".colour-tag-2",
"tag-navy": ".colour-tag-3",
"tag-grey": ".colour-tag-4",
"tag-white": ".colour-tag-5",
};
for (let cls in classMap) {
document.querySelector(classMap[cls]).classList.add(cls);
}
});
<style>
.tag-street-style {
background-color: purple;
}
.tag-slender {
background-color: red;
}
.tag-navy {
background-color: blue;
}
.tag-grey {
background-color: grey;
}
.tag-white {
background-color: black;
color: white;
}
.tag-red {
background-color: black;
color: red;
}
.tag-black {
background-color: white;
color: black;
}
.tag-green {
background-color: black;
color: green;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt </div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br><br><br>
<div class="grid-item tag-smart-style tag-casual tag-modern tag-red tag-black tag-green is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt </div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
First, here is a testable solution:
$(document).ready( function() {
$(".grid-item .grid-meta-wrapper").each(function(e){
$(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span></div>');
});
let classes = [...document.getElementById("tag-specifier").classList].filter(item => item.indexOf("tag-") === 0);
for (let index = 0; index < classes.length; index++) {
let currentItem = document.querySelector(".colour-tag-" + (index + 1));
if (currentItem !== null) {
currentItem.classList.add(classes[index]);
}
}
});
.tag-street-style {
background-color: purple;
}
.tag-slender {
background-color: red;
}
.tag-navy {
background-color: blue;
}
.tag-grey {
background-color: grey;
}
.tag-white {
background-color: black;
color: white;
}
.tag-red {
background-color: black;
color: red;
}
.tag-black {
background-color: white;
color: black;
}
.tag-green {
background-color: black;
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tag-specifier" class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt </div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
Now, let's understand it:
I have added the id of tag-specifier to the element which has the classes, so the code will have an easy time finding the classes to work with
document.getElementById("tag-specifier").classList is returning an object of key-value pairs where the keys are indexes (starting from 0) and the values are class names
I convert the result of classList into an array via [...document.getElementById("tag-specifier").classList] because I intend to use the filter() function of the array, alternatively I could have written a loop with similar effect
.filter() is being called for the newly converted array. This function takes a callback (more on that below) that determines which items we are interested about from the array and returns an array that contains only the items that the callback found interesting
a callback is a function that is scheduled to be executed at some future point of time
in our case, the callback of .filter() is a function which will be executed for each elements of the array and will evaluate them whether they are interesting
our callback is item => item.indexOf("tag-") === 0, which is a function (we use the arrow operator => to differentiate the parameter, which is item and the actual function body, which is item.indexOf("tag-") === 0), that is, we are only interested about items whose name starts with tag-
after the call for .filter(), the value assigned to classes is an array of class names that only holds valuable class names from our perspective, that is, class names starting with tag-
we loop classes using a variable we create for this purpose, named index
we search for the element that corresponds to the selector of ".colour-tag-" + (index + 1). The reason for the index + 1 is that Javascript arrays are 0-indexed and your tag indexes start from 1
note that (index + 1) is enclosed into parantheses. The reason for this is that + is an operator that acts both as concatenator and numeric addition and evaluates from left-to-right, that is, without the paranthesis around (index + 1) the result of ".colour-tag-" + index + 1 would be looking like .colour-tag-01 instead of .colour-tag-2
we check whether currentItem exists, so we program defensively, so, if any anomaly occurs, we intend our code to handle it gracefully
if currentItem existed, then we add the current class, which is classes[index]
EDIT
The initial solution I have implemented was assuming that we deal with a single such case, while your problem included multiple similar cases on the same page. To solve this issue, I have added an extra layer to the solution, querying the roots of all relevant subtrees in HTML and using them as the context of their respective problem-spaces.
Here is a snippet that illustrates it (yes, the first 3 tags will be unstyled, but this is not due to the logic of the code, but it is rather due to the styling specification of the structure):
$(document).ready( function() {
$(".grid-item .grid-meta-wrapper").each(function(e){
$(this).append('<div class="product-view-item-colour-tags"><span class="product-view-item-colour-tag colour-tag-1">tag1</span><span class="product-view-item-colour-tag colour-tag-2">tag2</span><span class="product-view-item-colour-tag colour-tag-3">tag3</span><span class="product-view-item-colour-tag colour-tag-4">tag4</span><span class="product-view-item-colour-tag colour-tag-5">tag5</span><span class="product-view-item-colour-tag colour-tag-6">tag6</span></div>');
});
for (let context of $(".list-grid .grid-item")) {
let idDeclaration = context.id;
let classes = [...context.classList].filter(item => item.indexOf("tag-") === 0);
for (let index = 0; index < classes.length; index++) {
let currentItem = context.querySelector(".colour-tag-" + (index + 1));
if (currentItem !== null) {
currentItem.classList.add(classes[index]);
}
}
}
});
.product-view-item-colour-tags .tag-navy {
background-color: blue;
}
.product-view-item-colour-tags .tag-grey {
background-color: grey;
}
.product-view-item-colour-tags .tag-white {
background-color: black;
color: white;
}
.product-view-item-colour-tags .tag-red {
color: red;
}
.product-view-item-colour-tags .tag-black {
background-color: white;
color: black;
}
.product-view-item-colour-tags .tag-green {
color: green;
}
.product-view-item-colour-tags .tag-yellow {
background-color: black;
color: yellow;
}
.product-view-item-colour-tags .tag-orange {
color: orange;
}
.product-view-item-colour-tags .tag-pink {
color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-grid">
<div id="thumb-product-3-9" class="grid-item tag-street-style tag-slender tag-classic tag-navy tag-grey tag-white is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 1</div>
<div class="grid-prices">
<div class="product-price">
<span>9.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br>
<div id="thumb-product-3-12" class="grid-item tag-social-style tag-thicker tag-premium tag-green tag-black tag-red is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 2</div>
<div class="grid-prices">
<div class="product-price">
<span>12.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br>
<div id="thumb-product-3-1" class="grid-item tag-outdoor-style tag-warmer tag-premium tag-pink tag-white tag-orange is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 3</div>
<div class="grid-prices">
<div class="product-price">
<span>14.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
<br>
<div id="thumb-product-3-4" class="grid-item tag-street-style tag-slender tag-casual tag-green tag-yellow tag-red is-loaded">
<section class="grid-meta-wrapper">
<div class="grid-main-meta">
<div class="grid-title"> T-Shirt 4</div>
<div class="grid-prices">
<div class="product-price">
<span>15.99</span>
</div>
</div>
</div>
<div class="grid-meta-status"></div>
</section>
</div>
</div>
I have a list like this.
Inside each .list item there is a html button :
<div class="list">
<button>.list</button>
</div>
Also, each item can be inside a .bloc element
<div class="list"><button>.list</button></div>
<div class=bloc>
<div class="list"><button>.list</button></div>
</div>
When I click on the button, I would like the previous .list item to have the .active class like so :
Well it’s pretty easy with jquery and i've done that, it’s work pretty well :
$('.list button').on('click', function() {
$(this).closest('.list').prev('.list').addClass('active');
});
BUT i have some specific cases :
Sometimes the list items can be hidden and a list with hidden class can’t have .active class :
Or more complicated. You have to go up on each item one by one and put the active class to the first which does not have the hidden class :
I did the mechanics for items without class hidden, but I'm afraid I'm going in the wrong direction because the number of cases is getting bigger and bigger. Ain't there a smarter way ? :o
$('.list button').on('click', function() {
if ($(this).closest('.list').prev().length === 0) {
if ($(this).closest('.bloc').length) {
$(this).closest('.bloc').prev('.list').addClass('active');
$(this).closest('.bloc').prev('.bloc').find('.list:last-child').addClass('active');
} else {
$(this).closest('.list').next('.list').addClass('active');
}
}
if ($(this).closest('.list').prev('.bloc').length) {
$(this).closest('.list').prev('.bloc').find('.list:last-child').addClass('active');
}
$(this).closest('.list').prev('.list').addClass('active');
}
Rather than use .closest .prev and .next you can use the overload to .index which will give you the index within an existing collection.
var idx = collection.index(element);
select all your .list items into a jquery object/collection
when clicking get the index within that collection
subtract 1 to get the previous .list item within that collection
The basic scenarios are covered with $(".list") :
// collate the list first
var list = $(".list");
// add click handler
list.click(function() {
// confirm there are no duplicates
// comapred with $(this).index() which is the index within the parent
console.log(list.index(this), $(this).index())
$(".active").removeClass("active");
var idx = list.index(this);
if (idx > 0)
list.eq(idx-1).addClass("active");
});
.list { border:1px solid #CCC; height: 20px; }
.bloc { border:1px solid #444; padding: 5px; }
.active { border:1px solid red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='bloc'>
<div class='list'></div>
<div class='list'></div>
</div>
<div class='list'></div>
<div class='list'></div>
</div>
All the other use-cases are then just a case of providing the correct selector up-front, with otherwise exactly the same code
var list = $(".wrapper>.bloc:not(.hidden)>.list:not(.hidden),.wrapper>.list:not(.hidden)");
I've tried to recreate some of your scenarios, but if there's one that's missing, please comment and I'll ensure it fits (within the remit of the question).
Giving:
var list = $(".wrapper>.bloc:not(.hidden)>.list:not(.hidden),.wrapper>.list:not(.hidden)")
list.click(function() {
$(".active").removeClass("active");
var idx = list.index(this);
if (idx > 0)
list.eq(idx-1).addClass("active");
});
.list { border:1px solid #CCC; height: 20px; }
.bloc { border:1px solid #444; padding: 5px; }
.active { border:1px solid red; }
.hidden { background-color: #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
<div class='bloc'>
<div class='list'></div>
<div class='list'></div>
</div>
<div class='list hidden'></div>
<div class='bloc'>
<div class='list hidden'></div>
<div class='list hidden'></div>
</div>
<div class='list'></div>
<div class='bloc'>
<div class='list hidden'></div>
<div class='list'></div>
</div>
<div class='list'></div>
<div class='list'></div>
<div class='bloc hidden'>
<div class='list'></div>
<div class='list'></div>
</div>
<div class='list'></div>
<div class='list'></div>
</div>
I have this HTML template:
<template id="single_feed">
<div class="ibox" id="FIRST_DIV">
<div class="ibox-title">
<h5 id="naslov"></h5>
</div>
<div class="ibox-content">
<form method="get" _lpchecked="1">
<div class="form-group row"><label class="col-sm-2 col-form-label">Naziv</label>
</form>
</div>
</div>
</template>
Now I want to clone and change first div ID (now set to: "FIRST_DIV"). But don't know how. I am able only to change 2nd,3rd.... divs.
My jquery code for cloning is:
$(".btn-RSS-single").click(function(e) {
var idClicked = e.target.id;
const $template = $( $('#single_feed')[0].innerHTML );
$template.find("div:first").attr("id", "NEW_ID_"+idClicked);
$('#kolona_1').append($template);
});
P.S:
I removed unnecessary parts to make code more readable.
jQuery has .html() function to retrieve the inner html and .clone() function to clone the element. You can use both to achieve what you want and make the code more readable.
See this example (I have changed some values to make the example clearer):
let clicked = 0;
$(".btn-RSS-single").click(function(e) {
var idClicked = e.target.id;
idClicked = clicked++;
const template = $("#single_feed").html();
$template = jQuery(template).clone().attr("id", "NEW_ID_" + idClicked);
$('#kolona_1').append($template);
});
#kolona_1 {
border: 1px solid gray;
}
#kolona_1 > div {
background-color: rgba(180, 180, 180, 0.2);
margin: 1em;
}
.btn-RSS-single {
background-color: lightblue;
padding: 0.2em 1em;
text-align: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="kolona_1"></div>
<div class="btn-RSS-single">ADD</div>
<template id="single_feed">
<div class="ibox" id="FIRST_DIV">
<div class="ibox-title">
<h5 id="naslov"></h5>
</div>
<div class="ibox-content">
<form method="get" _lpchecked="1">
<div class="form-group row"><label class="col-sm-2 col-form-label">Naziv</label></div>
</form>
</div>
</div>
</template>
Hope this will helps,
const template = (document.getElementsByTagName("template")[0]).content.cloneNode(true);
const firstDiv = template.querySelector("div");
firstDiv.id = "new id";
document.body.querySelector('#kolona_1').appendChild(firstDiv);
Try something like below
$(".btn-RSS-single").click(function(e) {
var idClicked = e.target.id;
const $template = $( $('#single_feed')[0].innerHTML );
$template.find("div:first").attr("class", "template-new"+idClicked);
$('#kolona_1').append($template);
$('#kolona_1').find('.template-new' + idClicked).attr('id', 'NEW_ID_' + idClicked);
});
basically I have several inputs in the DOM, I need to create the same amount of divs according to the inputs, once created, move each input within the created element, I'm using jquery for this, example:
<!-- first state: without inserting anything -->
<div class="container">
<input type="example-element">
<input type="example-element">
<input type="example-element">
</div>
<!-- second: inserting the dynamic elements -->
<div class="container">
<div class="dinamic-element"> </div>
<div class="dinamic-element"> </div>
<div class="dinamic-element"> </div>
<input type="example-element">
<input type="example-element">
<input type="example-element">
</div>
<!-- result: this is what I try to do -->
<div class="container">
<div class="dinamic-element">
<input type="example-element">
</div>
<div class="dinamic-element">
<input type="example-element">
</div>
<div class="dinamic-element">
<input type="example-element">
</div>
</div>
With jQuery:
// select all <input> elements within elements
// having a class of 'container':
$('.container input')
// wrapping each of those elements individually
// with the supplied HTML:
.wrap('<div class="dynamic"></div>');
$('.container input').wrap('<div class="dynamic"></div>');
.dynamic {
border: 1px solid #f90;
margin: 0 0 1em 0;
padding: 0.5em;
border-radius: 0.5em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input type="example-element">
<input type="example-element">
<input type="example-element">
</div>
In plain – albeit ES6 – JavaScript:
// creating a <div> element:
let div = document.createElement('div'),
// initialising an element to hold clones
// of that created <div>:
clone;
// adding the 'dynamic' class-name, via the
// HTMLElement.classList API, to the created
// <div>:
div.classList.add('dynamic');
// using Array.from() to convert the result of
// the document.querySelectorAll() method into
// an Array, in order to use Array methods:
Array.from(
// finding all <input> elements that are contained
// within element(s) with a class of 'container':
document.querySelectorAll('.container input')
// iterating over the Array of elements using
// Array.prototype.forEach(), and an anonymous
// Arrow function:
).forEach(
// input is a reference to the current <input>
// element of the Array of <input> elements over
// which we're iterating:
input => {
// here we clone the created <div> element, and
// assign that clone the 'clone' variable:
clone = div.cloneNode();
// replacing the input node with the cloned <div>:
input.replaceWith(clone);
// appending the input node to the cloned <div>:
clone.appendChild(input);
}
);
let div = document.createElement('div'),
clone;
div.classList.add('dynamic');
Array.from(document.querySelectorAll('.container input')).forEach(
input => {
clone = div.cloneNode();
input.replaceWith(clone);
clone.appendChild(input);
}
);
.dynamic {
border: 1px solid #f90;
margin: 0 0 1em 0;
padding: 0.5em;
border-radius: 0.5em 0;
}
<div class="container">
<input type="example-element">
<input type="example-element">
<input type="example-element">
</div>
And, finally, in plain – ES5 – JavaScript:
let div = document.createElement('div'),
clone;
div.classList.add('dynamic');
// here we use Function.prototype.call() to apply
// the Array.prototype.slice() to the HTMLCollection
// returned by document.querySelectorAll(), which
// is an older means of converting an Array-like
// Object into an Array:
Array.prototype.slice.call(
document.querySelectorAll('.container input')
).forEach(function(input) {
// here we use a traditional anonymous function declaration
// rather than using the aArrow function, but it behaves
// identically as above:
clone = div.cloneNode();
input.replaceWith(clone);
clone.appendChild(input);
});
let div = document.createElement('div'),
clone;
div.classList.add('dynamic');
Array.prototype.slice.call(
document.querySelectorAll('.container input')
).forEach(function(input) {
clone = div.cloneNode();
input.replaceWith(clone);
clone.appendChild(input);
});
.dynamic {
border: 1px solid #f90;
margin: 0 0 1em 0;
padding: 0.5em;
border-radius: 0.5em 0;
}
<div class="container">
<input type="example-element">
<input type="example-element">
<input type="example-element">
</div>
References:
JavaScript:
Array.from().
Array.forEach().
Array.prototype.slice().
document.querySelectorAll().
Function.prototype.call().
JavaScript Arrow functions.
ChildNode.replaceWith().
Node.appendChild().
jQuery:
wrap().
You could do this using jQuery
$( "input.example-element").wrap("<div class='dinamic-element'></div>");