JS Delete div content and write new code

Question

I have this code

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

I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.

To clean up div I found this code. But not the first. This is the first problem.

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

To write the new code to play the video, I should use this code:

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

I can not write a good javascript code to do what I explained you. ps. I can’t change the first code because it’s a default slider of image. Thanks for the help.

To get the first div only use the :first selector. So your selector should be .item:first. — Frederik Hansen
– Frederik Hansen, Commented Oct 10, 2017 at 14:42

Andrzej Smyk · Accepted Answer · 2017-10-10 15:14:37Z

2

If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the 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>

Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using 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>

edited Oct 10, 2017 at 15:14

answered Oct 10, 2017 at 14:41

Andrzej Smyk

1,72411 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matteo Mangia Over a year ago

Thanks a lot, I had tried with img: first but not with .replaceWith .

Andrzej Smyk Over a year ago

No problem, if you found this answer usefull please accept it

CoursesWeb · Accepted Answer · 2017-10-10 14:43:17Z

2

Try this, querySelector() selects only One selector, the first matched selector:

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

edited Oct 10, 2017 at 14:43

answered Oct 10, 2017 at 14:39

CoursesWeb

4,2573 gold badges24 silver badges27 bronze badges

1 Comment

hungerstar Over a year ago

You should explain how this selects the first element and not others.

sumeet kumar · Accepted Answer · 2017-10-10 14:44:33Z

0

You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need

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

edited Oct 10, 2017 at 14:44

answered Oct 10, 2017 at 14:40

sumeet kumar

2,6541 gold badge18 silver badges24 bronze badges

3 Comments

sumeet kumar Over a year ago

I have said to change selector as per his requirement

sumeet kumar Over a year ago

Noted thanks i have updated code with correct selector now

Matteo Mangia Over a year ago

Thanks also to you, I'm sorry, but I didn't know I could only vote once.

Collectives™ on Stack Overflow

JS Delete div content and write new code

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related