JavaScript 中的 Append 元素

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?

Answer 1

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 seeElement.insertBefore on MDN

Answer 2

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.  
    });

Answer 3

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

1. Find each IMG element inside your DIV with class SomeClassName .
2. 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);
});

Answer 4

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>