BEGINNER JavaScript creating elements
Question
I am currently working on creating elements via Java Script. For practice I am trying to populate an already existing 'form' element with a button, however I am receiving the following error;
Uncaught TypeError: Cannot read property 'appendChild' of null
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form></form>
</body>
<script type="text/javascript">
var btn = document.createElement('BUTTON');
var txt = document.createTextNode('CLICK ME');
btn.appendChild(txt);
document.getElementById('#form').appendChild(btn);
</script>
</html>
3 answers
solution1
2 ACCPTED 2014-10-05 10:26:19
You did not assign your <form> element an ID of form .
<body>
<form id="form">
</form>
</body>
You also don't need a # when using getElementById() .
document.getElementById('form').appendChild(btn);
If you don't want to assign an ID, you can use getElementsByTagName :
document.getElementsByTagName('form')[0].appendChild(btn);
solution2
1 2018-03-23 08:05:01
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form id="f">
</form>
<script type="text/javascript">
var btn = document.createElement('BUTTON');
var txt = document.createTextNode('CLICK ME');
btn.appendChild(txt);
document.getElementById("f").appendChild(btn);
</script>
</body>
</html>
<script>should either be inside the<head>or<body>.You didn't set an id for
<form>. Otherwise you can usegetElementsByTagName().
Ex:
document.getElementsByTagName('form')[0].appendChild(btn);
solution3
0 2014-10-05 10:28:00
1. <script> cannot be outside outside of <body>
You've not given your form an
id.AND you don't need
#because it's CSS syntax for ids and the method already knows you are providing it an id.
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.