javascript createElement 和 setAttribute答案

【问题标题】：javascript createElement and setAttributejavascript createElement 和 setAttribute
【发布时间】：2014-04-07 03:30:45
【问题描述】：

我开始自学 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>

【问题讨论】：

首先请提供jsfiddle url
第二个 - 你确定 div_element 在你的情况下不为空吗？
第三个也是最重要的 - 控制台是否显示错误？ :)
@lukas: #video_div 就在原始问题的标记中，我们可以看到myFunction 是如何被调用的，所以它不会在 DOMReady 之前出现。假设目标 div 存在可能是安全的。

标签： javascript html

【解决方案1】：

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

处抛出 title is not defined 异常

video.setAttribute(title, "Test");

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

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

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

使用 JSFiddle 后的更多提示：

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

【讨论】：

【解决方案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

【讨论】：