AppendChild doesn't work for parent element
Question
I'm trying to append checkboxes to the parent elements of the hyperlinks (ie to paragraphs). For some reason it doesn't work. Why?
<p><a href="https://example.com">Hyperlink</a></p>
<p><a href="https://example.org">Hyperlink</a></p>
<script>
var links = document.querySelectorAll('a');
var i;
for (i = 0; i < links.length; i++) {
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
// links[i].appendChild(input); // works
links[i].parentElement.nodeName.appendChild(input); // doesn't work
}
</script>
2 answers
solution1
2 ACCPTED 2019-12-06 08:03:36
hope this helps
var links = document.querySelectorAll('a'); var i; for (i = 0; i < links.length; i++) { var input = document.createElement('input'); input.setAttribute('type', 'checkbox'); // links[i].appendChild(input); // works // doesn't work - links[i].parentElement.nodeName.appendChild is not a function" // links[i].parentElement.nodeName.appendChild(input); links[i].parentNode.appendChild(input); }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div> <p><a href="https://example.com">Hyperlink</a></p> <p><a href="https://example.org">Hyperlink</a></p> </div> </body> </html>
solution2
1 2019-12-06 08:00:57
try this
<p><a href="https://example.com">Hyperlink</a></p>
<p> <a href="https://example.org">Hyperlink</a></p>
<script>
var links = document.querySelectorAll('a');
var i;
for (i = 0; i < links.length; i++) {
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
links[i].parentNode.appendChild(input);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
javascript appendChild doesn't work
appendChild doesn't append the same element twice
React AppendChild Component doesn't work
simple javascript appendChild doesn't work
querySelector doesn't work for elements that created by appendchild
appendChild from childNodes doesn't work
appendChild doesn't work correctly in IE
Element won't appendChild
Javascript appendChild doesn't append element and no errors in console
HTML DOM - element.appendChild() doesn't behave as I expect it to
Related Tags