# Prepending Unique Divs without Cloning with Pure JavaScript

When working with HTML elements in web development, sometimes we encounter situations where we want to append or prepend multiple instances of an element while modifying certain attributes each time. In this case scenario, the task is quite straightforward: create a series of div elements and prepends them before another container div while changing their class name on each iteration.

## Step 1: Selecting the Target Elements

Firstly, we need to select both our target elements using `document.querySelector()` or `document.querySelectorAll()`. Since we are only working with one instance for this example, let's use `querySelector`.

```javascript

const parent = document.querySelector('.parent');

```

Next up is selecting the element that will be cloned and prepended. Let's call it 'child'.

```javascript

const childElement = document.querySelector('div.child');

```

## Step 2: Creating a Loop for Iteration

To repeat our operation multiple times, we'll use `for` or `while` loop depending on whether the number of iterations is known in advance.

### Using a For Loop (Recommended)

If you know how many times you want to iterate beforehand:

```javascript

let counter = 1;

for (;counter <=5; counter++) {

// Logic inside your loop goes here.

}

```

Or if not, use a while loop instead. Note that in both cases, it's good practice to keep the logic within an anonymous function for better code organization and reusability.

### Using Template Literals

If you prefer using template literals (ES6+):

```javascript

for(let i = 0; i < 5; ++i){

const className = `preConfi${'AB''Math.floor(Math.random() * 2)'}${++i}`;

parent.insertAdjacentHTML('', `

Div ${counter}

`);

}

```

## Step 3: Modifying the Element Attributes Inside the Loop

Inside your loop, you can now modify any attributes of `childElement` as needed. In this case scenario, we're only concerned about changing its className attribute.

```javascript

const newClassName = `preConfi${'AB''Math.floor(Math.random() * 2)'}${counter}`;

childElement.className = newClassName;

```

## Step 4: Prepending the Element to the Parent

Finally, prepend your modified element inside a loop iteration. Note that if you want this operation performed on every iteration of your loop without any additional steps between iterations (e.g., waiting), consider moving all logic within an anonymous function and passing `i` or another unique identifier as needed.

```javascript

parent.prepend(childElement.cloneNode(true));

```

## Example Usage

Here's a complete example that demonstrates how you can use these methods to prepend multiple instances of div elements with changing class names:

```html

```

This will create five instances of a div elements, each with its unique class name prepended to their parent container. The key here is understanding how DOM manipulation works in JavaScript and being able to apply those concepts iteratively.

In conclusion, you don't necessarily need jQuery or any other library to accomplish simple tasks like this when working with HTML5 compatible browsers (IE9+). By using the native `document.querySelector()`, `cloneNode()` methods along with a basic loop structure such as for/while loops or even arrow functions if supported by your target environment, you can easily achieve similar results without relying on third-party libraries.

Jquery prepend no clone