javascript createElement 和 setAttribute

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 exception at

video.setAttribute(title, "Test");

在 setAttribute(title, ...) 中，您使用 title 就好像它是一个名为 title 的变量，但它并不存在。您想要传递 字符串值 "title":

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

...其他属性也一样...

由于您正在使用 JSFiddle，还有一些提示:

• 养成保存 fiddle 的习惯，并始终将链接与您的问题一起提供
• 在左侧面板的“Framework & Extensions”下，确保您已将 javascript 设置为“不换行”加载，否则您将无法按照您的方式从 html 调用方法已经完成了。 (当您在 JavaScript 面板中定义 JavaScript 函数时，这适用。我从包含 fiddle 链接的更新问题中看到，您目前将其全部放在 HTML 标记中，因此您不会遇到这个问题)<
• 在浏览器中按 F12，您将能够看到您的代码产生的实际错误消息。