how to append a string with appendChild in javascript

Question

I need to load some data and insert it in two ways into an li. First, it is inserted as a <p>. Second,it is inserted as a hidden input with the value specified. How can I do that? I mean, if I do it with the innerHTML property it works, but I need to add 2 elements, no only one. And when I try to use the appendChild it gives the error:

infoPersonal.js:22 Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

what can I do?

EDIT: in the code below it only enters if the condition is met, but it is supossed to add the input with every el

const datos= () => {
    const token = localStorage.getItem('token')
    if (token) {
        return fetch('https://janfa.gharsnull.now.sh/api/auth/me', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                authorization : token,
            },
        })
        .then( x => x.json())
        .then( user =>{
            const datalist = document.querySelectorAll(".data")

            datalist.forEach( function(el){
                var input
                const template = '<p>' + user[el.getAttribute("data-target")] + '</p>'
                if (el.getAttribute("data-target")==="birth") {
                    input = `<input class="input-date" type ="date" value="${user[date]}" hidden>`
                }
                el.innerHTML=template //this works
                el.appendChild(input) //this doesn't

            })
        })
    }
} 

window.onload=() =>{
    datos()
}

Consider reviewing the documentation for `document.createElement` - the result of calling this function successfully is something you can use with `.appendChild` — enhzflep, May 20 '20 at 02:51
Does [THIS](https://stackoverflow.com/questions/32447388/uncaught-typeerror-failed-to-execute-appendchild-on-node-parameter-1-is-no) answer your question? — Shawn Xiao, May 20 '20 at 02:52
yes, I was just ensuring there isn't a easier way to do that, Thank you both of you! — Jhoan Nicolas Andres Becerra Q, May 20 '20 at 02:59

score 1 · Accepted Answer · answered May 20 '20 at 02:53

appendChild expects a Node or element. You have two options:

Create the element:

input=document.createElement("input");
input.type="date";
input.className="input-date";
input.value=user.date;
input.hidden=true;

Or use innerHTML. Of course it will replace the contents of el, but you could use a placeholder or dummy element.

var div=document.createElement("div");
div.innerHTML="<input ...";
input=div.children[0];

I'd do the first thing. Or use a framework if you want to write less, but it's a little overkill just for this.

I was expecting to find a easier way to do that but i'll have to do it this way. Thank you! — Jhoan Nicolas Andres Becerra Q, May 20 '20 at 03:01

score 0 · Answer 2 · answered Feb 10 '23 at 15:40

You can use the insertAdjacentHTML() method on an element. First parameter takes a string denoting the position, and second argument is the HTML string. Really good browser support at this point too.

Element.insertAdjacentHTML('beforeend', '<p class="someClass">Hello, World</p>');

how to append a string with appendChild in javascript

2 Answers2