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

问题描述：

我是JavaScript新手，因此我试图自己介绍基本知识，而不使用像JQuery这样的包，以便更好地理解语言。使用JavaScript在新标签元素中创建标签元素

我的问题是关于在另一个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概念，请解释您的回答。

答

在获取元素之前，您必须将元素追加到主体中，因为它们不存在于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);

对不起，我刚刚修复了属性代码错别字。关于追加到DOM，与document.body.append（element1），这是必要的，使其身体标记的一部分？它不会通过在身体中放置一个元素来自动完成它？ – Luis 2014-10-31 08:38:07

好的。通过执行'document.getElementById（'div1'）'，您正在搜索DOM中具有'div1'的元素。但该元素不存在于DOM中。所以，在搜索它之前，你必须把它附加到'body'。 – Xlander 2014-10-31 08:40:50

谢谢你的澄清！ – Luis 2014-10-31 08:44:20

答

的问题是，一旦该元素在文档中document.getElementById('div1')才能发挥作用，因为它是你已经拥有该节点的引用，但是，这样使用：

element1.appendChild (element2);

或者：

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

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

因此，为了追加一个子元素，你不必继续背诵document.getElementById，而只是把元素引用加上.appendChild（内部元素）？ – Luis 2014-10-31 08:32:37

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

相关推荐