javascript - 字符串不能插入dom？代码如下
本文介绍了javascript - 字符串不能插入dom？代码如下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我尝试使用innerHTML和 appendChild都不行？ 为什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content">
<label for="plan">
<input type="text" name='plan' id='plan'>
</label>
<ul id='list'>
</ul>
<div class="btn">添加</div>
</div>
</body>
<script>
var btn=document.querySelector(".btn");
var data=[];
var list=document.getElementById("list")
btn.addEventListener("click",function(){
var value=document.getElementById("plan").value;
var m=JSON.parse(localStorage.data)
value?m.push({"item":value,"state":false}):"";
localStorage.data=JSON.stringify(m);
console.log(localStorage.data)
var arr=JSON.parse(localStorage.data);
// console.log(arr);
var html=arr.map((plan)=>{
return "<li>"+plan.item+"</li>"
}).join("");
console.log(html)
list.innerHTML(html);
list.appendChild(html)
});
</script>
</html>
解决方案
innerHTML 是属性而不是方法，直接赋值就行了，比如
ele.innerHTML = '<li>123</li>';appendChild 方法的参数必须是 HTMLElement 类型，即通过 createElement 创建的，或者获取的，字符串不行。比如:
var p = document.createElement("p");
document.body.appendChild(p);
这篇关于javascript - 字符串不能插入dom？代码如下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
