Add header on top of text area via javascript

Question

I have this sample code:

window.addEventListener('load', () => {
  // sticky profile notes
  const notes = document.querySelector('#id_notes'); // Get textarea element
  const headerDiv = document.createElement("div"); // Create a <div> element
  headerDiv.innerHTML = "SHOULD BE ON TOP"; // Insert instructions
  // add header on top 
  notes.prepend(headerDiv);
});

<body>
  <textarea id="id_notes" style="background-color: #ffffcc;">
    </textarea>
</body>

in which I plan to add a header the same size as the textarea. but instead of it being added on top of the textarea, its being added inside it.

I can only use JS because I don't know how to add it on a Django template. Thanks in advance!

EDIT: added desired end result:

I don't think you can put divs inside a textarea as it is a replaced element. — evolutionxbox
– evolutionxbox, Commented Jul 18, 2021 at 20:28
@evolutionxbox, I added a desired end result. I wasn't planning on adding a div inside a text area in the first place — Prosy A.
– Prosy A., Commented Jul 18, 2021 at 20:30

Majed Badawi · Accepted Answer · 2021-07-18 20:30:56Z

2

You can use Node#insertBefore:

window.addEventListener('load', () => {
  // sticky profile notes
  const notes = document.querySelector('#id_notes'); // Get textarea element
  const headerDiv = document.createElement("div"); // Create a <div> element
  headerDiv.innerHTML = "SHOULD BE ON TOP"; // Insert instructions
  // add header on top 
  notes.parentNode.insertBefore(headerDiv, notes);
});

<textarea id="id_notes" style="background-color: #ffffcc;"></textarea>

answered Jul 18, 2021 at 20:30

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2021-07-18 20:31:08Z

1

Use insertBefore() instead

window.addEventListener('load', () => {
 
  const notes = document.querySelector('#id_notes'); // Get textarea element
  
  const headerDiv = document.createElement("div"); // Create a <div> element
  headerDiv.innerHTML = "SHOULD BE ON TOP"; // Insert instructions
  
  // add header on top 
  notes.parentNode.insertBefore(headerDiv, notes)
});

<body>
  <textarea id="id_notes" style="background-color: #ffffcc;">
    </textarea>
</body>

answered Jul 18, 2021 at 20:31

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Add header on top of text area via javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related