Estoy tratando de crear un script de JavaScript/jQuery que agregue texto de una entrada a una etiqueta de anclaje que ya contiene texto. Aquí hay un ejemplo de lo que estoy tratando de lograr:
<!-- BEFORE INPUT HAS BEEN PRESSED --> <a> Add an attachment for https://thislink/ </a> <br> <!-- AFTER INPUT AS BEEN USED AND SUBMIT WAS PRESSED --> <a href="https://thislink/[text-from-input]"> [text-from-input] </a> <form> <input> text from this will be added to the text area </input> <input type="submit" value="Submit"></input> </form>Puede seleccionar los elementos requeridos del DOM y luego agregar un oyente cuando se envía el formulario y, en el controlador de eventos, simplemente tome el contenido de la entrada y actualice el DOM.
El siguiente ejemplo le ayudará a empezar. Además, siempre es una buena idea desinfectar la entrada del usuario antes de usarla.
const link = document.querySelector(".link"); const form = document.querySelector(".form"); form.addEventListener("submit", (e) => { e.preventDefault(); const userInput = e.target.elements["attachment-input"].value; link.href = `https://thislink/${userInput}`; link.textContent = userInput; }); <a class="link">Add an attachment for https://thislink/</a> <br> <form class="form"> <label for="attachment-input">Enter Attachment</label> <input type="text" id="attachment-input"> <input type="submit" value="Submit"> </form>dé su a e input una identificación. use javascript para obtener el valor de entrada. luego use innerHTML para agregar el valor de entrada a texto.
function appendText(e){ e.preventDefault(); var inputValue = document.getElementById('input').value document.getElementById('theLink').innerHTML += inputValue } <a id="theLink" href="https://thislink/[text-from-input]"> [text-from-input] </a> <form> <input id="input"> text from this will be added to the text area </input> <input onclick="appendText(event)" type="submit" value="Submit"/> </form>Puede utilizar el atributo id para hacer que el contenedor contenga su etiqueta de anclaje y luego actualizar su etiqueta de anclaje dinámicamente con cualquier valor que haya escrito el usuario:
function changeLink() { document.getElementById("dynamic-link").innerHTML = `<a href='https://thislink/${document.getElementById("user-input").value}'>Link Generated</a>` } <div> Add an attachment for https://thislink/ </div> <br> <div id="dynamic-link"> </div> <br/> <form> <input type="text" id="user-input" /> <br/><br/> <button type="button" onclick="changeLink()">Submit</button> </form>