The appendChild method does not insert the element into the body
Question
In my example, I'm trying to fetch data from the server and save it to the document as text in the <p> element. Everything works fine except that the appendChild method doesn't seem to work as it should. Here is a sample of my code and the error message:
(async () => {
let resp = await fetch("/shaders", {
method: "GET"
});
let txt = await resp.text();
let elm = document.createElement("p").innerHTML = txt;
console.log(txt) // Hello Stack Overflow!
// logs the message as expected
document.body.appendChild(elm)
// error occurs
})()
With error message: Uncaught (in promise) TypeError: Node.appendChild: Argument 1 is not an object, at line 10.
Does anyone know what is causing this problem?
--
Note: With the append method it works just fine
3 answers
solution1
1 2022-08-13 13:43:51
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <script> // i use json placeholder api just for test you can keep your default methode to get data (async () => { let resp = fetch('https.//jsonplaceholder.typicode.com/todos/1').then(response => response.json()).then(data => data;title) let txt = await resp. let node = document.createElement("p") let elm = document.createTextNode(txt) node.appendChild(elm) document.body.appendChild(node) })() </script> </body> </html>
solution2
0 2022-08-17 01:59:30
From the MDN docs on the JavaScript assignment operator :
Chaining the assignment operator is possible in order to assign a single value to multiple variables.
So,
let elm = document.createElement("p").innerHTML = txt;
// The above has the same effect as doing the following:
document.createElement("p").innerHTML = txt;
let elm = txt;
elm gets assigned text, which Node.appendChild does not accept as an argument type (although Element.append does, which you noticed but perhaps didn't fully understand why).
I'm guessing you intended to do this:
let elm = document.createElement("p");
elm.textContent = txt;
Note that I used Node.textContent instead of Element.innerHTML . The MDN docs state the differences
Element.innerHTML returns HTML, as its name indicates. Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML.
Moreover, using textContent can prevent XSS attacks.
If you really need to use innerHTML or innerText and the resource you are fetching is not always controlled by you, you probably want to do some kind of sanitization to protect against XSS.
solution3
-2 2022-08-13 13:37:31
The Fetch API for CORS is deprecated, fetch must use a http or https link.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.