javascript - 使用 JavaScript 在新标签元素中创建标签元素

标签 javascript html nodes

我是 javascript 新手,因此我试图在不使用 JQuery 之类的包的情况下自学基础知识,以便更好地理解该语言。

我的问题是关于仅使用 javascript 在另一个 html 标签中创建 html 标签,我似乎无法在不出现错误的情况下执行此操作(发布在底部)。

例如,我一直在尝试做的是通过以下方式使元素成为彼此的子元素:

<!doctype html>
<html>
<head>
</head>
<body>
    <script>
    var element1 = document.createElement("div");
    var element2 = document.createElement("svg");
    var element3 = document.createElement("rect");
    element1.setAttribute('id', 'div1');
    element2.setAttribute('id', 'out');
 //This is where I fall short
 //One way i have tried
    document.getElementById('div1').appendChild(element2);
    document.getElementById('out').appendChild(element3);
//another way I have tried
    document.getElementByClassName('div').appendChild(element2);
//last way I tried 
    document.getElementById('div1').innerHTML = element2;
</script>
</body>
</html

尽管我一直在努力完成这项工作,但我一直未能完成任务,因此我不断收到错误

 "TypeError: 'null' is not an object (evaluating 'document.getElementBy(Id/ClassName)
 ().innerHTML/appendChild') 

非常感谢任何帮助!另外,如果问得不算太多,因为我仍在尝试理解 javaScript 概念,请解释一下您的回答。

最佳答案

问题是 document.getElementById('div1')仅当该元素位于文档中时才有效,因为您已经拥有对该节点的引用,因此请使用它:

element1.appendChild (element2);

或者:

document.body.appendChild(element1);
document.getElementById ('div1').appendChild (element2);

这会将节点附加到<body>元素,然后搜索 document对于元素 id .

关于javascript - 使用 JavaScript 在新标签元素中创建标签元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26670159/

相关文章:

c - 我有段错误,并且不确定我的代码出了什么问题

c++ - 如何将我的链表插入函数从 O(N) 更改为 O(1)

javascript - PouchDB - 延迟获取和复制文档

javascript - 如何使用 jquery 捕获输入中的更改事件?

javascript - 如何防止用户使用 jQuery 更改页面

JavaScript读取.ini文件

jquery - 动画在 iPhone 上的移动 Safari 中效果不佳

c++ - 表示二叉树 C++ 的节点类

javascript - 如何确保代码在严格模式和宽松模式下以相同的方式工作?

php - 将动态 html 放在页面上最可接受的方式