Quiero que la Fecha aparezca arriba de la Segunda sección. guía por favor cómo lograrlo
var sectionTwo = document.getElementById("sectionTwo"); var x = sectionTwo.getBoundingClientRect(); var b = document.createElement("div"); b.style.position = 'fixed'; b.innerHTML = new Date(); document.body.appendChild(b); b.style.top = (x.top - b.style.height) + 'px';Una forma de hacerlo es así:
Código HTML:
<div id="sectionTwo"> </div>Código JS:
var sectionTwo = document.getElementById("sectionTwo"); var b = document.createElement("div"); b.innerHTML = new Date(); sectionTwo.insertAdjacentElement("beforebegin", b);Código CSS (solo para visualización):
#sectionTwo { width: 80%; height: 50px; background-color: gray; }<div> <div style="height:800px;"></div> <div id="sectionOne">First Section</div> <div id="sectionTwo">Second Section</div> <button onclick="showDate();">toggle</button></div> <script> function showDate() { var sectionTwo = document.getElementById("sectionTwo"); var x = sectionTwo.getBoundingClientRect(); var b = document.createElement("div"); b.style.position = 'absolute'; b.innerHTML = new Date(); document.body.appendChild(b); b.style.bottom = 0; b.style.top = (x.top - b.offsetHeight) + 'px'; }</script>Tal vez esto podría ayudarte mejor.
var sectionTwo = document.getElementById("sectionTwo"); var b = document.createElement("div"); b.innerHTML = new Date(); sectionTwo.insertAdjacentElement("beforebegin", b); #sectionTwo { height: 35px; width:35px; background-color: pink; } <div id="sectionTwo"> </div>