Question

我开始自学javascript。我想我会尝试制作一个在提供URL时嵌入YouTube视频的脚本。当我创建iframe元素，设置属性并将其作为子项附加到div时，任何人都可以帮助我理解我做错了什么吗？我正在使用JSFiddle，当我检查元素时，似乎没有标记添加到div中。谢谢！

编辑：这是我的jsfiddle链接：http://jsfiddle.net/86W8N/2/

<p>Click the button to call function</p>
YoutubeURL: <input id="url" type="text">
<button onclick="myFunction()">Try it</button>

<div id="video_div">
</div>

<script>
function myFunction() {
    var urlValue = document.getElementById("url").value;
    var videoID = urlValue.substring(urlValue.indexOf('=') + 1);

    var video = document.createElement("iframe");
    video.setAttribute(title, "Test");
    video.setAttribute(width, "440");
    video.setAttribute(height, "390");
    video.setAttribute(src, "http://www.youtube.com/embed/" + videoID);
    video.setAttribute(frameborder, "0");

    var div_element = document.getElementById("video_div");

    div_element.appendChild(video);
}
</script>

Answer 1

您的代码将停止执行，并在

处抛出title is not defined例外

video.setAttribute(title, "Test");

在setAttribute(title, ...)中，您正在使用title，就好像它是一个名为title的变量，但这不存在。您希望传递字符串值 "title"：

video.setAttribute('title', 'Test');

......和其他属性相同......

自从你使用JSFiddle后还有一些提示：

养成拯救小提琴的习惯，并始终提供与您的问题相关的链接
在左侧面板的“框架和扩展”下，确保您已将“javascript”设置为“无包装”，否则您将无法以您的方式调用html中的方法做完了。（当您在JavaScript面板中定义JavaScript函数时，这适用。我从您更新的问题中看到包含的小提琴链接，您当前将其全部放在HTML标记中，因此您不会遇到此问题）
在浏览器中点击F12，您将能够看到代码生成的实际错误消息。

Answer 2

您需要用引号'或双引号"包装您的属性：

video.setAttribute('title', "Test");
video.setAttribute('width', "440");
video.setAttribute('height', "390");
video.setAttribute('src', "http://www.youtube.com/embed/" + videoID);
video.setAttribute('frameborder', "0");

<强> Fiddle Demo

javascript createElement和setAttribute

2 个答案: