How after begin Text Node in DOM

user_14967878 0
Viewed 80

According to the documentation https://developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML the insertAdjacentElement function can only add an element object, and the insertAdjacentText function can only add the primitive data type "tex".

Example of successful code execution:

const app = document.getElementById("app");

// Successfully add the element to the beginning of the app container
const div = document.createElement("div");
app.insertAdjacentElement("afterbegin", div);

// Successfully add the primitve text to the beginning of the app container
app.insertAdjacentElement("afterbegin", "...other text...");

But when I want to add a Text object, then of course an error is displayed, since insertAdjacentElement only supports Element object, example:

const app = document.getElementById("app");

const text = document.createTextNode("123");
app.insertAdjacentElement("afterbegin", text ); // Uncaught TypeError: Failed to execute 'insertAdjacentElement' on 'Element': parameter 2 is not of type 'Element'.

Specify, please, you can add a Text object as quickly as possible in speed (namely document.createTextNode ("123"), PRIMARY TEXT DOES NOT FIT !!! or NOT document.createTextNode ("123").data) to the beginning of the app container?

P.S. insertAdjacentText and insertAdjacentHTML are NOT the same as you need to add the Text object!

dom javascript
1 Answers

If I understand correctly what you are trying to achieve, then you can do it using:

parentNode.insertBefore(newNode, parentNode.childNodes[0]);

Working Example:

const app = document.getElementsByClassName('app')[0];

const text = document.createTextNode('123');
app.insertBefore(text, app.childNodes[0]);
<div class="app">

  <h2>My App</h2>

</div>

user_38977750
Related