Question

我试图制作一些动态HTML。我只想测试它是否有效并执行以下操作：

let context = document.getElementById(anyDivsId);
let h = document.createElement("H1");
let t = document.createTextNode("hello");
let item = h.appendChild(t);
console.log(item);
context.innerHTML = item;

控制台只记录纯文本，Div的InnerHTML也只是纯文本而不是HTML元素。我做错了什么？

修改
我真的只想显示h1而不是纯文本。
我已将context.innerHTML更改为context.appendChild

Answer 1

如果您设置innerHTML的值，则它是字符串，而不是DOM节点。

要么

let context = document.getElementById(anyDivsId);
context.innerHTML = "<h1>hello</h1>";

或者做.. ..

let context = document.getElementById(anyDivsId);
let h = document.createElement("H1");
let t = document.createTextNode("hello");
h.appendChild(t);
context.appendChild(h);

Answer 2

试试这个

let context = document.getElementById(anyDivsId);
context.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');

或

let context = document.getElementById(anyDivsId);
let h = document.createElement("H1");
h.innerText = 'Hello';
context.appendChild(h);

Answer 3

这应该有效

检查以下代码段

window.onload=function(){
let context = document.getElementById('anyDivsId');
let h = document.createElement("h1");
let t = document.createTextNode("hello");
let item = h.appendChild(t);
console.log(item);
context.innerHTML = item;
  context.innerText="hello";
}

希望有所帮助

Javascript / Typescript生成的HTML无法正确显示

3 个答案: