How to add a dynamically generated DV into a TextArea

JavaScript
1

Hello,

We are trying to add a dynamically generated DV into a TextArea but it is not working.
We have this code:

var id_emo = 0;

function add_emo (box_id, emo_id, emo_box) {

	 alert('box_id: ' + box_id);

	 var emoji_g = document.getElementById(emo_id).innerHTML.trim();
	
	 alert('emoji_g: ' + emoji_g);

	 var emo_elem = document.createElement('div');	 
	 emo_elem.className = 'bigger_emoji'; 
	 ++id_emo;
	 var emo_div = 'emozi_' + id_emo;
	 emo_elem.id = emo_div;
	
	 alert('emo_elem.id: ' + emo_elem.id);

	 emo_elem.innerHTML = emoji_g;

	 alert('final:' + emo_elem.innerHTML);

	 alert('last:' + document.getElementById(box_id));

	 document.getElementById(box_id).appendChild(emo_elem); 

}

So if we use the above code, all is working OK, as per alerts you see, but when we get to last line:
document.getElementById(box_id).appendChild(emo_elem);

then the Append does not happen. And there are NO JS errors in browser.

And if we replace document.getElementById(box_id).value
then we get JS Error form browser of:
document.getElementById(…).value.appendChild is not a function

So how is this done?
FYI, you can see the code in test mode here:
https://www.anoox.com/ask_answer/qanda_test.php?q_id=136547

Thanks,

2

What’s a “DV”? Did you mean a <div> element?

1 Like
3

The only content allowed inside a <textarea> is text.

4

The site that you provide us has a table structure and in its table data cells the code append div’s or other elements.Do you want to do this in your case?

5

Correction. It has a broken table structure. eg. numbers 911 and 912

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.anoox.com%2Fask_answer%2Fqanda_test.php%3Fq_id%3D136547

911: Warning: A table row was 3 columns wide and exceeded the column count established by the first row (2).
912: Error: Table column 3 established by element td has no cells beginning in it.

6

gandalf, so that explains it.
That is if “The HTML textarea element represents a multi-line plain-text editing control.” then of course that is why it is not accepting a CSS DIV in there. That is a shame that one cannot add a DIV to a TextArea because that would open some interesting possibilities. Well I guess that is called pushing the limits of the current Web :slight_smile:

7

It is called a text area…

If it did allow a div how do you suppose one would actually place the text"</div></div>" in the text area? A div or any other element for that matter. A better approach is to allow users to use markdown, bbcode, or an editor like ckeditor.

1 Like
8

So is this input area here on Sitepoint a Ckeditor?

9

When you enter a comment, it is entered into a <textarea> but when displayed it is displayed in a <div>.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.