JQuery заменить одним тегом HTML другим

Question

У меня есть вкладка img, как показано ниже:

  <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

Я использую .replaceWith () $(this).replaceWith("<div>" + $(this).html() + "</div>"); и ожидаю код, подобный приведенному ниже:

  <div class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" </div>

Но как-то я получил:

<div></div>

Пожалуйста, посмотрите на мой код:

$('img').each(function() {
  $(this).replaceWith("<div>" + $(this).html() + "</div>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

Answer 1

ПОДХОД К ЗАМЕНЕ DOM NODE:

С vanilla JavaScript вы можете просто использовать атрибут external HTML () , чтобы извлечь элемент в виде строки и просто заменить "img" "с" div "с использованием метода replace () и затем замените элемент <img> на <div> в вашей DOM (не совсем понятно, почему, поскольку div не может реально использовать атрибут src ) путем простого преобразования текущей полученной строки, назначенной переменной div, в узел DOM с помощью createContextualFragment () и последующего использования метода replaceNode () для замены img узел с узлом div в вашей DOM.

Проверьте и запустите следующий фрагмент кода или откройте этот JSFiddle для практического примера вышеупомянутого подхода:

const img = document.querySelector("img");
const div = img.outerHTML.replace("img", "div");
let newDiv = document.createRange().createContextualFragment(div);

img.parentNode.replaceChild(newDiv, img);

 <img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

NB Вам нужно будет проверить изолированную программную среду Code Snippet или изолированную программную среду JSFiddle, чтобы увидеть, что элемент <img/> заменен на * 1032. * element.

---

Подход клонирования атрибутов:

Еще один способ сделать это (получивший эту идею из решения jQuery Barmar выше) будет создать новый элемент div и просто клонировать атрибуты от элемента <img> до нового элемента <div> с использованием свойства attribute и метода setAttributes () следующим образом:

const img = document.querySelector("img");
const newDiv = document.createElement("div");

[...img.attributes].forEach(({name, value}) =>
  newDiv.setAttribute(name, value)
);

img.parentNode.replaceChild(newDiv, img);

<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

NB Опять же, вам нужно будет проверить изолированную программную среду кода или изолированную программную среду JSFiddle, чтобы увидеть, что элемент <img/> заменен на <div> элемент.

Answer 2

Вы не можете использовать .html(), чтобы получить HTML самого элемента. И даже если бы вы могли, так как вы помещаете HTML между <div> и </div>, он вложит изображение в DIV (как это делает .wrap()), а не помещает атрибуты изображения в сам DIV.

Вам потребуется создать элемент DIV и скопировать в него атрибуты.

$('img').replaceWith(function() {
  return $("<div>", {
    "class": $(this).attr("class"),
    css: {
      "background-image": `url(${$(this).attr("src")})`
    }
  });
});

div.media-1200px {
  width: 1200px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="media-1200px" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

Answer 3

попробуйте с этим

    $('img').each(function() {
            $(this).replaceWith("<div with="100px"> + $(this).html() + "</div>"); 
});

вы должны установить ширину атрибута для визуализации div.