how to Change element of html using jquery

Question

<script type="text/javascript">
$(document).ready(function(){
    $(window).resize(function() {
    if($(window).width() < 767){
    $("#second").insertBefore("#first"); }
    else{
        $("#first").insertBefore("#second"); }
     });
});
</script>

I want to change the html element. In the above code nothing is wrong but when our screen size has already small (< 767) it will not work due to resize() function and when we remove resize function then it will work but it failure when we increase the screen size. It can't change the element. Actually i am looking a solution like @media css property. We all Know when we use media we can see the effect through inspector. I got a code but it will not working

document.querySelector('style').textContent += "@media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";

Actually the code was not same. I edited and try to run but not working. How to change elements like in small screen with media query? or any other solution but must be responsive

Kashyap · Accepted Answer · 2017-08-21 10:27:15Z

1

<script type="text/javascript">
$(document).ready(function(){
    $(window).resize(function() {
         change();
     });
     change();
});
function change(){
    if($(window).width() < 767){
        $("#second").insertBefore("#first"); 
    }
    else
    {
        $("#first").insertBefore("#second"); 
    }
}
</script>

answered Aug 21, 2017 at 10:27

Kashyap

3914 silver badges10 bronze badges

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

Comments

jonhendrix · Accepted Answer · 2017-08-21 11:38:24Z

0

Do you mean to swap html elements according to screen width? If so, why not use CSS?

<style>
.hidden {
  display: none;
}

@media screen and (min-width: 768px) {
  #first-copy, #second-copy {
    display: block;
  }

  #first, #second {
    display: none;
  }
}
</style>

<html>
<div id="first" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    first element
  </p>
</div>
<div id="second" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    second element
  </p>
</div>
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    second element
  </p>
</div>
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center">
  <p>
    first element
  </p>
</div>
</html>

https://jsfiddle.net/8sug5pws/2/

edited Aug 21, 2017 at 11:38

answered Aug 21, 2017 at 10:43

jonhendrix

3663 silver badges15 bronze badges

1 Comment

Amit Kumar Over a year ago

This is also an alternative solution.

ROCKY · Accepted Answer · 2017-08-21 10:29:33Z

0

U can use @media screen for example:

@media screen and (max-width: 480px) {
  #info {
    font-size: 0.6em;
}

In CSS Of course

answered Aug 21, 2017 at 10:29

ROCKY

113 bronze badges

Comments

Manoprabu R · Accepted Answer · 2017-08-21 10:34:05Z

0

try this code its working fine...

    resize_solution();
    $(document).ready(function(){
        $(window).resize(function() {
            resize_solution();
        }); 
    });
    function resize_solution(){
        if($(window).width() < 767){
            $("#second").insertBefore("#first"); 
        }
        else{
            $("#first").insertBefore("#second"); }
    }

answered Aug 21, 2017 at 10:34

Manoprabu R

214 bronze badges

Comments

Ashley Medway · Accepted Answer · 2017-08-21 11:00:12Z

0

You must use .trigger(resize);

edited Aug 21, 2017 at 11:00

Ashley Medway

7,3197 gold badges54 silver badges73 bronze badges

answered Aug 21, 2017 at 10:24

Dmytro Lishtvan

8088 silver badges13 bronze badges

1 Comment

Amit Kumar Over a year ago

can you tell more about that? I found the info related to .trigger from api.jquery.com/trigger i understood but still i have no idea how to use resize with .trigger.

Collectives™ on Stack Overflow

how to Change element of html using jquery

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related