Splitting node from parent node in JavaScript DOM

Question

I have DOM HTML like this

<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

And I want move away div class "video" from div "width_medium". Result will like this

<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
</div>
<div class="width_medium">
  <div class="video">Video</div>
</div>
<div class="width_medium">
  <p>Text 3</p>
  <p>Text 4</p>
</div>

How can I do that with jQuery?

Hey, Can you tell me this HTML tag <div class="video">Video</div> is always fixed ? — KP Chundawat
– KP Chundawat, Commented May 5, 2017 at 3:55

guradio · Accepted Answer · 2017-05-05 04:14:40Z

2

$(".video").unwrap();
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")

.width_medium p {
  background-color: blue
}

.width_medium .video {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

Unwrap the elements.
Use .prevAll() and .nextAll() and .wrapAll() to wrapp all prev and next p
Use .wrap() for the class video

UPDATE

Dont unwrap at first follow previous step then add .parent() to .video then use unwrap()

$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
$(".video").parent().unwrap();

.width_medium p {
  background-color: blue
}

.width_medium .video {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
  <p>Text 1</p>
  <p>Text 2</p>
  <div class="video">Video</div>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

edited May 5, 2017 at 4:14

answered May 5, 2017 at 4:01

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

7 Comments

nnnnnn Over a year ago

This wouldn't quite work if the original div had p elements before or after it, would it?

guradio Over a year ago

it would work on current html markup though and that is what OP provided

nnnnnn Over a year ago

Sure, but isn't there a variation to this code that could target that div regardless of what else is on the page?

guradio Over a year ago

@nnnnnn mate will update work base on what you ask earlier?

guradio Over a year ago

@nnnnnn thanks for critism it helps to make answers better and fitted for the OP

|

Collectives™ on Stack Overflow

Splitting node from parent node in JavaScript DOM

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related