如何在 javascript 中使用 appendChild 追加字符串

Question

我需要加载一些数据并以两种方式将其插入 li。首先，它作为 <p> 插入。其次，它作为具有指定值的隐藏输入插入。我怎样才能做到这一点？我的意思是，如果我使用 innerHTML 属性进行操作，它会起作用，但我需要添加 2 个元素，而不仅仅是一个。当我尝试使用 appendChild 时，它给出了错误：

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

我能做什么？

编辑：在下面的代码中，只有满足条件时才会进入，但应该在每个 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()
}

Answer 1

appendChild 需要 Node 或元素。您有两个选择：

创建元素：

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

或使用innerHTML。当然，它会替换 el 的内容，但您可以使用占位符或虚拟元素。

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

我会做第一件事。或者想写的少就用框架，但是光是这个就有点大材小用了。

如何在 javascript 中使用 appendChild 追加字符串

how to append a string with appendChild in javascript

html

javascript

innerhtml

appendchild