JS删除DIV内容和编写新代码

我有这样的代码JS删除DIV内容和编写新代码

<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>

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

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

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

要编写新代码来播放视频，我应该使用此代码：

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

我不能写一个很好的javascript代码做什么，我解释你。 ps。我无法更改第一个代码，因为它是图像的默认滑块。感谢您的帮助。

来源

2017-10-10 Matteo Mangia

要获得第一个div只使用'：first'选择。所以你的选择器应该是'.item：first'。 –

如果你想使用jquery，你可以利用replaceWith()和:first伪选择器选择，只有第一<img> repalce：

$(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>

卜T优不需要jQuery来完成它。 Document.querySelector()只返回指定的选择相匹配的第一个元素，并使用replaceChild（https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/）的repalce它：

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>

来源

2017-10-10 14:41:19

@hungerstar谢谢，我编辑了片段 –

非常感谢，我曾尝试与img：第一，但不是与.replaceWith。 –

没问题，如果你发现这个答案有用，请接受它 –

试试这个，querySelector()只选择一个选择，第一个匹配的选择：

document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';

来源

2017-10-10 14:39:50 CoursesWeb

你应该解释如何选择第一个元素而不是其他元素。 – hungerstar

您可以使用jQuery replaceWith()方法如下达到这个..你可以修改选择根据自己的需要

$('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>

来源

2017-10-10 14:40:26

我说要改变选择器根据他的要求 –

修改了正确的选择器 –

注意到，感谢我有更新的代码与正确的选择器现在 –

JS删除DIV内容和编写新代码

回答

相关问题