gpt4 book ai didi

javascript - 通过 javascript DOM 创建 html(真正的基本问题)

转载 作者:行者123 更新时间:2023-11-30 08:13:12 26 4
gpt4 key购买 nike

我在使用 JavaScript 时遇到了一些问题。不知何故,我无法开始使用 javascript 创建的 html 元素(或者说我没有得到任何结果)。

我不允许使用:

document.writeln("<h1>...</h1>");

我已经试过了:

document.getElementsByTagName('body').appendChild('h1');
document.getElementsByTagName('h1').innerHTML = 'teeeekst';

还有这个:

var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));

但是我的浏览器没有显示任何文本。当我在此代码块中放置警报时,它会显示。所以我知道正在访问代码。

对于这个学校作业,我需要通过 javascript 设置整个 html,通常进入正文。

是否有设置 h1 或 div 的小型工作代码示例?

我的完整代码:

<html>
<head>
<title>A boring website</title>
<link rel="stylesheet" type="text/css" href="createDom.css">


<script type="text/javascript">

var element = document.createElement('h1');
element.innerHTML = "Since when?";

document.body.appendChild(element);


</script>

</head>
<body>

</body>
</html>

最佳答案

getElementsByTagName 返回一个 NodeList(就像一个元素数组),而不是一个元素。您需要对其进行迭代,或者至少从中选择一个项目,然后访问其中元素的属性。 (尽管 body 元素更容易被引用为 document.body。)

appendChild 需要一个节点,而不是一个字符串。

var h1 = document.createElement('h1');
var content = document.createTextNode('text');
h1.appendChild(content);
document.body.appendChild(h1);

您还必须确保代码不会像在您编辑的问题中那样在正文存在之前运行。

最简单的方法是将它包装在一个运行 onload 的函数中。

window.onload = function () {
var h1 = document.createElement('h1');
var content = document.createTextNode('text');
h1.appendChild(content);
document.body.appendChild(h1);
}

... 但通常使用 a library 是更好的主意抽象出浏览器中各种强大的事件处理系统。

关于javascript - 通过 javascript DOM 创建 html(真正的基本问题),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7515830/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com