我正在尝试在HTML中现有的div下创建另一个div
<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
`
}
有人可以向我解释我做错了什么吗？我是一个自学成才的开发人员，很抱歉，如果我的代码组织得不够好，仍在学习
最佳答案
在创建makeOscarPlayer()函数之前，先要调用它。
您需要将makeOscarPlayer()函数声明包装在脚本标签中。
您正在将document.getElementById("my-video")作为参数传递给makeOscarPlayer()，但是没有ID为'my-video'的HTML元素。您为函数指定了null参数，而函数声明中没有参数。
您需要告诉脚本新元素的放置位置。为此，您可以获取一个现有元素并使用parentNode和insertBefore
这是供您参考的准系统版本：
<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>
有关
parentNode和insertBefore的工作方式的更多信息，请参见this Stack Overflow question