Question

假设我有以下HTML：

<body>
    <section role="main">
    </section>
</body>

1）我可以这样做吗？

var section = document.getElementsByTagName("section");

2）我可以这样做吗？

var section = document.querySelector("section[role=main]");

3）最后，我怎样才能将孩子附加到这个元素上？ appendChild（）不起作用。

var p = document.createElement("p").innerText("A paragraph.");
section.appendChild(p);

Answer 1

您可以使用1或2，
使用getElementsByTagName - 看看小提琴 - http://jsfiddle.net/2jzho6hh/3/
这个返回标签名为section的所有元素的数组，因此要访问第一个section元素，必须在数组上使用0索引。对于第二个元素，在数组上使用1个索引，依此类推..

使用querySelector，检查小提琴 - http://jsfiddle.net/2jzho6hh/2/
querySelector返回与您指定的选择器匹配的第一个元素，如本例section[role=main]，这意味着选择第一个{em>属性角色的<{1}}元素及其< em> value 是 main

还有另外一种方法section，您可以认为，这是上述两种方法的结合。它就像querySelectorAll那样基于CSS选择器语法选择元素，并返回与选择器匹配的所有元素的数组，就像querySelector

一样

Answer 2

正确的代码是

var p = document.createElement("p");
	p.innerHTML="A paragraph";
section.appendChild(p);

在声明p时不要添加innerHTML。如果这样做，p将不会返回子节点。将p作为一个节点，然后将innerhtml添加到它中。

Javascript：如何将子元素追加到section元素？

2 个答案: