How to append Content using Javascript only

Question

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"));
}

This is JavaScript? I'm not sure what you're trying to ask. Does this not work? — evolutionxbox
– evolutionxbox, Commented Mar 31, 2021 at 10:19
Note that asking for "best way" is off topic as it's opinion based. You're probably meaning to ask "how can I do this" — fdomn-m
– fdomn-m, Commented Mar 31, 2021 at 10:29
@traktor sorry I do understand what jQuery is. It's that the OP doesn't think it's JavaScript — evolutionxbox
– evolutionxbox, Commented Mar 31, 2021 at 10:29

Bhautik · Accepted Answer · 2021-03-31 10:39:09Z

1

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>

answered Mar 31, 2021 at 10:39

Bhautik

11.3k3 gold badges20 silver badges41 bronze badges

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

Comments

leek1234 · Accepted Answer · 2021-04-01 15:13:44Z

1

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

answered Apr 1, 2021 at 15:13

leek1234

4702 silver badges12 bronze badges

Comments

react_or_angluar · Accepted Answer · 2021-03-31 11:09:22Z

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>

neilnikkunilesh · Accepted Answer · 2021-03-31 11:14:49Z

0

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 */
}

edited Mar 31, 2021 at 11:14

answered Mar 31, 2021 at 10:26

neilnikkunilesh

3833 silver badges15 bronze badges

4 Comments

evolutionxbox Over a year ago

I don't think the OP wants to add a class name. Just move the content from one element to another.

react_or_angluar Over a year ago

moveThisContent already exists in the DOM.

neilnikkunilesh Over a year ago

// For Moving the content you can use following way from #myDiv1 to #myDiv2 $('#myDiv2').append( $('#myDiv1>p') );

fdomn-m Over a year ago

@neilnikkunilesh yes, that's what they're already doing - they want to move content without jquery.

Collectives™ on Stack Overflow

How to append Content using Javascript only

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related