Question

我是javascript的新手，因此我试图在不使用像JQuery这样的软件包的情况下自学这些基础知识，以便更好地理解语言。

我的问题是关于在另一个html标签中仅使用javascript创建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概念，请解释您的回复。

Answer 1

问题是document.getElementById('div1')只有在元素在文档中时才能工作，因为你已经有了对该节点的引用，所以请使用：

element1.appendChild (element2);

或者：

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

将节点附加到<body>元素，然后在document中搜索id元素。

Answer 2

在获取元素之前，您必须将元素附加到正文，因为DOM中不存在元素。

var element1 = document.createElement("div");
var element2 = document.createElement("svg");
var element3 = document.createElement("rect");
element1.setAttribute('id', 'div1');
element2.setAttribute('id', 'out');

//you missed these.
document.body.append(element1);
document.body.append(element2);

document.getElementById('div1').appendChild(element2);
document.getElementById('out').appendChild(element3);

使用JavaScript在新标记元素中创建标记元素

2 个答案: