Question

31

Creating a textarea with JavaScript

rated 0 times [ 38] [ 7] / answers: 1 / hits: 72577 / 13 Years ago, sun, september 11, 2011, 12:00:00

I'm trying create a text area in a div with the id of "body". I call the function with an onClick event, but when I click it, all that is created is object HTMLTextAreaElement. How can I get this to work?

function opentextarea() {

    var input = document.createElement('TEXTAREA');

    input.setAttribute('name', 'post');

    input.setAttribute('maxlength', 5000);

    input.setAttribute('cols', 80);

    input.setAttribute('rows', 40);

    var button = document.createElement('BUTTON');

    document.getElementById("body").innerHTML=input, button;

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austynp

Add To Favorites

Follow

Total Points: 505

Total Questions: 118

Total Answers: 106

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

austynp questions

1 How to make puppeteer wait for page redirect from Cloudflare browser check?

Tue, Apr 20, 21, 00:00, 3 Years ago

1 Redux createAsyncThunk vs useEffect hook

Sun, Apr 11, 21, 00:00, 3 Years ago

1 How to type an object key in Typescript?

Sat, Feb 6, 21, 00:00, 3 Years ago

1 How do I send image data from a url using express?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Can I wait for a process to complete when consuming RabbitMQ messages with Node.js?

Mon, Mar 9, 20, 00:00, 4 Years ago

View All

answered 13 Years ago raymondd · Accepted Answer

var div = document.getElementById(yourDivElement);

var input = document.createElement(textarea);

var button = document.createElement(button);

input.name = post;

input.maxLength = 5000;

input.cols = 80;

input.rows = 40;

div.appendChild(input); //appendChild

div.appendChild(button);

If you don't need to access specific DOM functions, I recommend to use innerHTML (because it's generally faster and less susceptible to memory leaks). Don't forget to properly deal with quotation marks. To keep the code readable, you can separate multiple lines by a plus sign:

document.getElementById(body).innerHTML =

   '<textarea maxlength=5000 cols=80 rows=40></textarea>' + 

   '<button></button>':

If you want to replace the contents, simply use div.innerHTML = ; before using the appendChild methods.