Estoy tratando de evitar que mi botón se mueva hacia la derecha cada vez que presiono el botón y cambio el margen de la página en la que estoy. Estoy haciendo esto para simular un poco el cambio de tamaño de la ventana.
Aquí hay un fragmento de código del código actual:
const button = document.createElement('button'); button.setAttribute("id", "1st"); button.innerText = "BRANCH"; button.style.color = 'red'; button.style.position = 'absolute'; button.style.zIndex = 0; button.style.width = '16%'; button.style.height = '10%'; button.style.left = '45%'; button.style.bottom = '30%'; button.style.right = '0%'; button.style.top = '29%'; button.style.padding = '2% 3%'; document.querySelector('body').append(button); button.addEventListener('click', () => { console.log("button pressed") var x = document.createElement("P"); x.innerText = "THIS IS A TEST"; x.style.marginLeft = "100%"; x.style.zIndex = -1; document.querySelector('div').appendChild(x); });document.querySelector() El método de documento querySelector() devuelve el primer elemento dentro del documento que coincide con el selector o grupo de selectores especificado. Si no se encuentran coincidencias, se devuelve nulo".
el problema es que cuando usa document.querySelector('div') encuentra el "primer" div en su código.
aquí document.querySelector('div') podría haber encontrado el div en el que también se encuentra su botón. Por lo tanto, al hacer clic, se agrega el 100% de la etiqueta del párrafo del margen izquierdo ( <p></p> ) a su documento.