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內容和編寫新代碼

回答

相關問題