通过 javascript DOM 创建 html （非常基本的问题）

发布于 2024-12-06 03:20:02 字数 1030 浏览 0 评论 0原文

我在使用 javascript 时遇到了一些问题。不知怎的，我无法开始（或者说我没有得到任何结果）通过javascript创建html元素。

我不允许使用：

document.writeln("

`...`

");

我已经尝试过这个：

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>

原文

i'm having some trouble with javascript. Somehow i can't get started (or saying i'm not getting any results) with html elements creation by javascript.

i'm not allowed to use:

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

i've tried this:

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

and this:

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

but my browser isn't showing any text. When i put an alert in this code block, it does show. So i know the code is being reached.

for this school assignment i need to set the entire html, which normally goes into the body, by javascript.

any small working code sample to set a h1 or a div?

my complete code:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年华零落成诗 2024-12-13 03:20:02

getElementsByTagName 返回一个NodeList（类似于元素数组），而不是一个元素。您需要迭代它，或者至少从中选择一个项目，并访问其中元素的属性。（不过，body 元素更容易被引用为 document.body。）

appendChild 需要一个 Node，而不是字符串。

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);
}

…但通常来说，使用一个库来抽象浏览器中各种强大的事件处理系统是一个更好的主意。

getElementsByTagName returns a NodeList (which is like an array of elements), not an element. You need to iterate over it, or at least pick an item from it, and access the properties of the elements inside it. (The body element is more easily referenced as document.body though.)

appendChild expects an Node, not a string.

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

You also have to make sure that the code does not run before the body exists as it does in your edited question.

The simplest way to do this is to wrap it in a function that runs onload.

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

… but it is generally a better idea to use a library that abstracts the various robust event handling systems in browsers.

回复收藏 0 原文

<逆流佳人身旁 2024-12-13 03:20:02

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

与将文本节点附加到新创建的元素的方式非常相似，您还必须将该元素附加到 DOM 的目标元素。

例如，如果您想将新元素追加到页面某处的

中，则必须首先将该元素作为目标，然后追加。

//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);

Did you append the element to document?

Much the same way you're appending text nodes to the newly created element, you must also append the element to a target element of the DOM.

So for example, if you want to append the new element to a <div id="target"> somewhere are the page, you must first get the element as target and then append.

//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);

回复收藏 0 原文

江湖彼岸 2024-12-13 03:20:02

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

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

create element, add html content and append to body

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

回复收藏 0 原文

~没有更多了~

关于作者

此刻的回忆

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

通过 javascript DOM 创建 html （非常基本的问题）

`...`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

通过 javascript DOM 创建 html （非常基本的问题）

...

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

若能看破又如何

夢野间

doggiejohn

就此别过

初见终念

qq_rvKjBH

友情链接

`...`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。