CODEWITHSUNDEEP
javascriptjqueryappendappendchild
leek1234
leek1234

Reputation: 470

How to append Content using Javascript only

I've got this below in jQuery, Where on a window width less than 1024px, I want to append ".moveThisContent" and move it to ".newLocation" what the best way to do this in Javascript is? Would it be to use .appendChild

if($(window).width() < 1024){
  $(".newLocation").append($(".moveThisContent"));
}

Upvotes: 0

Views: 85

Answers (4)

leek1234
leek1234

Reputation: 470

With this i've used .appendChild and that does what i need.

Upvotes: 1

neilnikkunilesh
neilnikkunilesh

Reputation: 383

Here is the way of what you want to do

You can refer to this link Here

You can use media query in javascript for checking window width

if (window.matchMedia("(max-width: 1024px)").matches) {
  /* The viewport is less than, or equal to, 1024 pixels wide */
  var element = document.getElementByClassName("newLocation");
  element.classList.add("moveThisContent");
} else {
  /* The viewport is greater than 1024 pixels wide */
}

Upvotes: 0

react_or_angluar
react_or_angluar

Reputation: 1574

Expanding a bit on this answer https://stackoverflow.com/a/66886186/3825777, I thought I'd try and make things visually clear for visual learners. I also wanted to make it clear what width we are talking about. Please look at the console to see if the width you think you are talking about is less than or greater than 1024.

$('#sWidth').text(window.screen.width);
$('#sHeight').text(window.screen.height);
$('#wWidth').text($(window).width());
$('#wHeight').text($(window).height());


const width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
console.log(width);
if( width < 1024 ){
    document.getElementsByClassName('newLocation')[0].innerHTML = document.getElementsByClassName('moveThisContent')[0].innerHTML;
    document.getElementsByClassName('moveThisContent')[0].innerHTML = '';
}
.moveThisContent{color:#111111;}
.newLocation{color:#777777;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Screen width: <span id="sWidth"></span><br>
Screen height: <span id="sHeight"></span><br>
Window width: <span id="wWidth"></span><br>
Window height: <span id="wHeight"></span><br>



<div class="moveThisContent"> This inner html content is inside a div with class name moveThisContent and in the css this has the color #111111.  I chose the number one not because I like the color 111111, but because I wanted to make it known that his is the first div in the HTML. The content of this div which is the text that you are reading should only move to the div with class name newLocation if the width of your screen is less than 1024 pixels.  The color of this other div is #777777. You will know the content moved if the text you are reading is grey.</div>
<div class="newLocation">The class name of this div is newLocation and the CSS hexidecimal color code for this div is 777777.  The content of this div will change to the content of the div before it if your screen width is less than 1024 pixels  </div>

Upvotes: 0

Bhautik
Bhautik

Reputation: 11282

You can use getElementsByClassName and for set and get content you can use innerHTML

const width  = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( width < 1024 ){
    document.getElementsByClassName('newLocation')[0].innerHTML = document.getElementsByClassName('moveThisContent')[0].innerHTML;
    document.getElementsByClassName('moveThisContent')[0].innerHTML = '';
}
.moveThisContent{color:blue;}
.newLocation{color:red;}
<div class="moveThisContent"> lorem ipsum lorem ipsum </div>
<div class="newLocation"></div>

Upvotes: 1

Related Questions