How can I make my div appear with createElement
Question
I am trying to make another div right under the existing div in the HTML
<html>
<head>
<title>
Media Player
</title>
<script src="script.js"></script>
</head>
<script>
makeOscarPlayer(document.getElementById("my-video"))
</script>
<body>
<div class="my-player">
Hello!
</div>
</body>
</html>
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `
hello
`
}
can someone explain to me what I am doing wrong? I am a self-taught developer sorry if my code is not perfectly organized still learning
3 answers
solution1
1 2018-03-21 19:25:41
You need to append that new element to a specific parent, in your case to my-video .
The function appendChild appends the new element to a parent element.
function makeOscarPlayer(parent) { var div = document.createElement("div"); div.innerHTML = 'Hello from Ele'; parent.appendChild(div); } makeOscarPlayer(document.getElementById("my-video"))
#my-player { border: 1px dashed green; padding: 5px; margin: 5px; width: 300px; background-color: #f1f1f1 } #my-video div { border: 1px dashed green; padding: 5px; margin: 5px; width: 200px; font-weight: 700; }
<div id="my-player"> Hello! <div id="my-video"> </div> </div>
solution2
1 ACCPTED 2018-03-21 19:53:45
You are calling the makeOscarPlayer() function before you are creating it.
You need to wrap the makeOscarPlayer() function declaration in a script tag.
You are passing in document.getElementById("my-video") as a parameter to makeOscarPlayer() , but there is no HTML element with an id of 'my-video'. You are giving the function a parameter of null , while the function declaration has no parameters.
You need to tell the script where to put the new element. To do that, you grab an existing element and use parentNode and insertBefore
Here is a barebones version that I got working for your reference:
<html>
<head>
<title>
Media Player
</title>
</head>
<script>
</script>
<body>
<div id="my-player">
Hello!
</div>
</body>
</html>
<script type="text/javascript">
function makeOscarPlayer(){
var div = document.createElement("div");
div.innerHTML = `hello`;
// This grabs the element that you want to create a new element by
var existingDiv = document.getElementById("my-player");
// This tells the script where to put the new element
existingDiv.parentNode.insertBefore( div, existingDiv.nextSibling);
}
// Must be called in the same script block or after the script holding the function declaration is loaded
makeOscarPlayer();
</script>
For more information on how parentNode and insertBefore work, see this Stack Overflow question
solution3
0 2018-03-21 19:27:27
It's a good start, but you're calling the function incorrectly and your function isn't adding anything to the page.
we use appendChild to add a node to the page.
In your function you create and add text to a div, but you don't return the node you made( and also you didn't close your line of code with a semi-colon so I added that too ) but this should work:
<html>
<head>
<title>
Media Player
</title>
</head>
<body>
<div class="my-player">
Hello!
</div>
<script>
function makeOscarPlayer() {
var div = document.createElement("div");
div.innerHTML = `hello`;
return div;
}
document.getElementById("my-video").appendChild(makeOscarPlayer())
</script>
</body>
</html>
function makeOscarPlayer() { var div = document.createElement("div"); div.innerHTML = `hello`; return div; } document.getElementById("my-video").appendChild(makeOscarPlayer())
<html> <head> <title> Media Player </title> </head> <body> <!-- added my-video div --> <div id="my-video"></div> <div class="my-player"> Hello! </div> </body> </html>
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.