如何仅使用 Javascript 附加内容

Question

我在下面的 jQuery 中找到了这个，在 window 宽度小于 1024px 的地方，我想附加“.moveThisContent”并将其移动到“.newLocation”什么最好在 Javascript 中执行此操作的方法是？是不是要用.appendChild

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

Answer 1

这是你想做的事情的方式

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

Answer 2

您可以使用 getElementsByClassName，对于设置和获取内容，您可以使用 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>

Answer 3

稍微扩展一下这个答案，我想我会尝试让视觉学习者在视觉上看得更清楚。我还想弄清楚我们在谈论什么宽度。请查看控制台，看看您认为您所说的宽度是否小于或大于 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>

Answer 4

有了这个，我使用了 .appendChild，它满足了我的需要。

如何仅使用 Javascript 附加内容

How to append Content using Javascript only

javascript

jquery

append

appendchild