Append element in JavaScript

Question

I have the below HTML structure.

<div class="SomeClassName">
   <a href="https://abc.xyz">
      <span>
         <img id="SomeImgID1" />
      </span>
   </a>
   <a href="https://xyz.abc">
      <span>
         <img id="SomeImgID2" />
      </span>
   </a>
</div>

I want to append <div> tag before each <img> tag, how do I do it with pure javascript?

Welcome to Stackoverflow. Please take the [tour](https://stackoverflow.com/tour) (and get a badge). Your question lacks any attempt at solving this problem on your own. The idea is for you to try to get something to work and then come here with specific problems you are unable to resolve. Taking the tour and reading about [How to ask a good question](https://stackoverflow.com/help/how-to-ask) in the help center will provide all the information you need. — Randy Casburn, Dec 17 '20 at 03:09
Does this answer your question? [How to replace DOM element in place using Javascript?](https://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript) — Multihunter, Dec 17 '20 at 04:51

Vasyl Moskalov · Accepted Answer · 2020-12-17T05:32:57.347

0

Something like

let divElement=document.querySelection('div.someClass');
Array.from(divElement.querySelectionAll('img'))
.forEach(el=>divElement.insertBefore(document.createElement('div'),el));

Again, if you want to wrap img then you can use next snippet:

let divElement=document.querySelection('div.someClass');
Array.from(divElement.querySelectionAll('img'))
.forEach(el=>{
    let div=document.createElement('div');
    divElement.insertBefore(div,el));
    div.appendChild(el);
});

For more information see Element.insertBefore on MDN

edited Dec 17 '20 at 05:32

answered Dec 17 '20 at 03:20

Vasyl Moskalov

4,242
3
20
28

sorry I don't want to "append" the empty
tags before tags. I want to wrap tags inside the
The output should be like this:

– iaMsUPerNOva Dec 17 '20 at 04:19

score 0 · Answer 2 · answered Dec 17 '20 at 04:58

iaMsUPerNOva finally i got you and i am here with solution .

<a class="image" href="https://abc.xyz"> <!--note this-->

$(function() {
        var node = $("a.image"); // This will copy your a tag so that img tag will also get copied.
    $(".SomeClassName").append('<div>hello</div>');//This will create a new div containing  hello text 
        $("a.image").remove(); // This will remove a tag which is already copied to node.
        $("SomeClassName").append(node); //Finally we are going to add newly created div to SomeClassName.  
    });

Mr. X · Answer 3 · 2020-12-17T05:10:04.713

Okay, so what we want to do here involves two steps:

Find each IMG element inside your DIV with class SomeClassName.
For each of these IMG elements, create a new DIV and insert it before the element.

Here is how you do that.

/* document.querySelectorAll returns a NodeList.
   The spread operator "..." converts it into an array,
   so that we can call the forEach method on it. */
[...document.querySelectorAll("div.SomeClassName img")].forEach(x => {
    // Here we create the new DIV
    let div = document.createElement("div");
    // Just some sample text to show
    div.textContent = "Hello!";
    // x.parentNode finds the parent of the IMG element.
    // The frst parameter of node.InsertBefore is the
    // element we want to insert as its child, and the
    // the second parameter is the reference element
    // before which this new element will be inserted
    x.parentNode.insertBefore(div, x);
});

Don't just answer with code, actually explain why it is helpful and how it works so that the asker can learn. — Timothy Chen, Dec 17 '20 at 05:00
Thank you, Mr.X for your reply. I don't want to append a new
tag before . I want tag to be wrapped inside
instead of appending
before so it looks like this — iaMsUPerNOva, Dec 17 '20 at 05:51

iaMsUPerNOva · Answer 4 · 2020-12-17T06:51:25.687

Thank you, everyone, for your responses. I forgot to mention before that I had another parent <div> and the final structure was like this.

<div class="ParentClassName">
   <div class="ChildClassName">Some Content</div>
   <div class="ChildClassName">Some Content2</div>
   <div class="ChildClassName">
      <a href="https://abc.xyz">
      <span>
      <img id="SomeImgID1" />
      </span>
      </a>
      <a href="https://xyz.abc">
      <span>
      <img id="SomeImgID2" />
      </span>
      </a>
   </div>
</div>

I could able to wrap all <img> tags inside <div> by doing the below step. Note: If your classname is dynamic you can remove it from the query selectors and you can put only the selector element like document.querySelector("div");

 let divElement = document.querySelector("div.ParentClassName");
      Array.from(divElement.querySelectorAll("div.ChildClassName img")).forEach(
        (el) => {
          let div = document.createElement("div");
          el.parentElement.insertBefore(div, el);
          div.appendChild(el);
        }
      );

and my final output was

<div class="ParentClassName">
   <div class="ChildClassName">Some Content</div>
   <div class="ChildClassName">Some Content2</div>
   <div class="ChildClassName">
      <a href="https://abc.xyz">
         <span>
            <div>
               <img id="SomeImgID1" />
            </div>
         </span>
      </a>
      <a href="https://xyz.abc">
         <span>
            <div>
               <img id="SomeImgID2" />
            </div>
         </span>
      </a>
   </div>
</div>

Append element in JavaScript

4 Answers4