How to append dynamically generated button next to textbox

Question

1.00/5 (1 vote)

See more:

Hi All,

<input class="input" name="location" type="text" placeholder="Search or choose..." id="txtLocation" autocomplete="off" value="">

Now I want to place button next to this text box.

I tried below code using Javascript but not working. When I inspect the textbox then button element is inside the text box but not visible on UI. I want this button to be visible next to text box.

function onload()
{
   //1st approach
   debugger;
   var ele = document.getElementById('txtLocation');
   var btn = document.createElement('BUTTON');
   btn.id= 'btnGo';
   btn.type='button'
   btn.onclick = 'setSelectedValue()';
   btn.innerHTML = 'Go';   
   ele.append(btn);
   
   //2nd approcah
  const btn1 =  document.createElement("BUTTON");
  btn1.innerHTML = "Go";
  ele.appendChild(btn1);
}

window.onload = onload;

What I have tried:

I tried createElement & appendChild / append but no luck.

Posted 23-Aug-22 1:11am

Member 11052432

Updated 29-Aug-22 21:27pm

Add a Solution

Comments

[no name] 23-Aug-22 21:21pm

Why can't you just "hide / show" an existing button instead of "adding on the fly"? You're probably running into (re)flow issues.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

pedrofmb · Answer 1 · 2022-08-24T08:47:00

No puedes agregar otros elementos HTML dentro de un input pero usa esta forma para que se vean.

Google translate:
You can't add other HTML elements inside an input but use this way to show them.

JavaScript

var ele = document.getElementById('txtLocation');

var btn = document.createElement('button');
btn.id= 'btnGo';
btn.type='button'
btn.onclick = 'setSelectedValue()';
btn.innerHTML = 'Go';   
ele.parentElement.append(btn);

//2nd approcah
const btn1 =  document.createElement("button");
btn1.innerHTML = "Go";
ele.parentElement.appendChild(btn1);

Khushboo Satasiya · Answer 2 · 2022-08-29T21:27:00

I found some issues in your mentioned JS code.

1) If you want to add any element after other HTML element then pick its parent and add as a child.
2) You created one function named "onload" and function can be called with "()". So, code should be "window.onload = onload();" instead of "window.onload = onload;"

function onload()
{
   var btn = document.createElement('button');
   btn.id= 'btnGo';
   btn.type='button'
   btn.onclick = 'setSelectedValue()';
   btn.innerHTML = 'Go';
   
   var body = document.getElementsByTagName("body")[0];
   body.appendChild(btn);
}

window.onload = onload();

How to append dynamically generated button next to textbox

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0