Question

我在使用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>

Answer 1

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来抽象浏览器中各种强大的事件处理系统。

Answer 2

您是否将元素附加到文档？

与将文本节点附加到新创建的元素的方式大致相同，您还必须将元素附加到DOM的目标元素。

因此，例如，如果要将新元素追加到页面的某个地方<div id="target">，则必须首先将该元素作为目标，然后追加。

//where you want the new element to do
var target = document.getElementById('target'); 
// create the new element
var element = document.createElement('h1');
element.appendChild(document.createTextNode('text'));
// append
target.appendChild(element);

Answer 3

创建元素，添加html内容并附加到正文

var element = document.createElement('h1');
element.innerHTML = 'teeeekst';
document.body.appendChild(element);

通过javascript DOM创建html（真正的基本问题）

3 个答案: