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

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

javascript html

使用JavaScript在新标记元素中创建标记元素,javascript,html,nodes,Javascript,Html,Nodes,我是javascript新手，因此我尝试自学基本知识，而不使用JQuery之类的包，以便更好地理解该语言我的问题是关于只使用javascript在另一个html标记中创建一个html标记，我似乎无法做到这一点而不出错（张贴在底部）例如，我一直试图通过以下方式使元素成为彼此的子元素： <!doctype html> <html> <head> </head> <body> <script> var elem

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

非常感谢您的帮助！另外，如果没有太多问题，因为我仍在试图理解javaScript概念，请解释您的回答。

问题是

document.getElementById（'div1'）

只能在元素位于文档中后才能工作，因为您已经有了对该节点的引用，因此请使用：

element1.appendChild (element2);

或：

它将节点附加到

元素，然后通过其

id

在

文档中搜索元素，因为元素在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);

因此，为了附加子元素，您不必一直背诵document.getElementById，只需将元素引用加上.appendChild（内部元素）？很抱歉，属性代码输入错误，我刚刚修复了它。关于使用document.body.append（element1）将其附加到DOM，是否需要将其作为body标记的一部分？它不是通过在身体中加入元素自动完成的？好的。通过执行document.getElementById（'div1'）
，您正在DOM中搜索id为div1
的元素。但是DOM中不存在该元素。因此，在搜索它之前，您必须将它附加到正文。感谢您的澄清！
document.body.appendChild(element1);
document.getElementById ('div1').appendChild (element2);

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