javascript - JS删除div内容并编写新代码

Question

我有这个代码

 <div class="carousel-inner" role="listbox">

     <div class="item">
        <img src="http://" alt="">
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="http://" alt="">
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>

我只想替换第一个 div，<img src = "" alt = "">与 <video> <source src = ""> </ video> .

为了清理 div，我找到了这段代码。但不是第一个。这是第一个问题。

$('.item").empty();

要编写播放视频的新代码，我应该使用以下代码:

$(".item").html('<video><source src=""></video>');

我无法编写好的 javascript 代码来完成我向您解释的内容。附言。我无法更改第一个代码，因为它是默认的图像 slider 。感谢您的帮助。

Answer 1

如果你想使用 jquery，你可以使用 replaceWith()和 :first 伪选择器只选择和替换第一个 <img> :

$(function () {
  $('img:first').replaceWith('<video><source src=""></video>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">

     <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>

但是你不需要 Jquery 来完成它。 Document.querySelector()仅返回与指定选择器匹配的第一个元素并使用 replaceChild 替换它( https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/ ):

var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);

<div class="carousel-inner" role="listbox">
     <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>
      <div class="item">
        <img src="" alt="" />
        <div class="carousel-caption text-left">
          <div class="container">

          </div>
        </div>
      </div>

</div>