How to add text before input element using JavaScript?

Question

 item1:<input type="text" name="item1">

I want to add the text "item1" before the input element in JavaScript.How can I do that?

I have created an input tag in JavaScript using

var i1 =document.createElement("input");

Do you mean in the markup or you want to approach this using javascript? — Reem, Jun 24 '20 at 14:40
Look at [these resources](https://www.w3schools.com/js/js_htmldom_html.asp) by w3school — Vinícius A. L. Souza, Jun 24 '20 at 14:41
Use `input.insertAdjacentHTML('beforeBegin, 'HTML')`. MDN Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML — shreyasm-dev, Jun 24 '20 at 14:42
This is possibly a repeated [question](https://stackoverflow.com/questions/2554149/html-javascript-change-div-content). — Vinícius A. L. Souza, Jun 24 '20 at 14:42

Unmitigated · Accepted Answer · 2020-06-24T16:51:20.897

0

document.querySelector('input').insertAdjacentHTML('beforeBegin', "item1: ");

<input type="text" name="item1">

If you are creating the element dynamically, first append it to an element like the body, and then use insertAdjacentHTML.

var i1 = document.createElement("input");
document.body.appendChild(i1)
i1.insertAdjacentHTML('beforebegin', "Item: ");

edited Jun 24 '20 at 16:51

answered Jun 24 '20 at 14:42

Unmitigated

var i1 =document.createElement("input"); I'm new to this. can you explain me more how can i do this? – Jainish Dabhi Jun 24 '20 at 16:28
@JainishDabhi You can do this: `document.body.appendChild(i1); i1.insertAdjacentHTML('beforebegin', "Item: ");` – Unmitigated Jun 24 '20 at 16:50

score 0 · Answer 2 · answered Jun 24 '20 at 14:43

0

Use input.insertAdjacentHTML('beforeBegin', 'HTML'). This code inserts HTML before the start of the input element.

const input = document.querySelector('input')
input.insertAdjacentHTML('beforeBegin', 'item1: ')

<input type="text" name="item1">

answered Jun 24 '20 at 14:43

shreyasm-dev

index.html:195 Uncaught DOMException: Failed to execute 'insertAdjacentHTML' on 'Element': The element has no parent. – Jainish Dabhi Jun 24 '20 at 15:19
Are you using `document.createElement()`? I’ve only seen that error with `document.createElement()`. It’s happening because you haven’t appended the element to anything. – shreyasm-dev Jun 24 '20 at 15:23
Yes. I have created an Input element by using document.createElement() – Jainish Dabhi Jun 24 '20 at 15:24
Then use `element.appendChild(input)` before using `insertAdjacentHTML` – shreyasm-dev Jun 24 '20 at 15:25
var i1 =document.createElement("input"); I kind of new to this. can you explain me more how can i do this? – Jainish Dabhi Jun 24 '20 at 15:32
1

If you're appending it directly to the document, use `document.body.appendChild(i1)`. Else use `element.appendChild(i1)`. – shreyasm-dev Jun 24 '20 at 17:39

score 0 · Answer 3 · answered Jun 24 '20 at 14:50

0

This code finds all the input in the document with name attributes and prepends the name text in front of the input:

document.querySelectorAll("input[name]").forEach((input) => {
  input.insertAdjacentHTML('beforeBegin', `${input.name}: `);
});

<input type="text" name="item1"><br>
<input type="text" name="item2"><br>
<input type="text" name="item3">

answered Jun 24 '20 at 14:50

pretzelhammer

var i1 =document.createElement("input"); I'm new to this. can you explain me more how can i do this? – Jainish Dabhi Jun 24 '20 at 16:29

score 0 · Answer 4 · answered Jun 24 '20 at 14:57

0

You can create an element, like this

let input = document.querySelector("input")
let element = document.createElement("YOUR DESIRED ELEMENT GOES HERE")
element.insertBefore(input)

answered Jun 24 '20 at 14:57

Oliver Hnat

index.html:195 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('YOUR DESIRED ELEMENT GOES HERE') is not a valid name. – Jainish Dabhi Jun 24 '20 at 15:21

4 Answers4