通过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.其中我计划添加一个与 textarea 大小相同的标题。 but instead of it being added on top of the textarea, its being added inside it.但不是将其添加到 textarea 顶部，而是将其添加到其中。

I can only use JS because I don't know how to add it on a Django template.我只能使用 JS，因为我不知道如何将它添加到 Django 模板上。 Thanks in advance!提前致谢！

EDIT : added desired end result:编辑：添加所需的最终结果：

Answer 1

You can use Node#insertBefore :您可以使用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>

Answer 2

Use insertBefore() instead使用insertBefore()代替

 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>

通过javascript在文本区域顶部添加标题

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-07-18 20:30:56

解决方案2
1 2021-07-18 20:31:08

通过javascript在文本区域顶部添加标题

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-07-18 20:30:56

解决方案2 1 2021-07-18 20:31:08

解决方案1
2 已采纳 2021-07-18 20:30:56

解决方案2
1 2021-07-18 20:31:08