Saber 酱的抱枕

<img src="http://g.hiphotos.baidu.com/zhidao/pic/item/a8014c086e061d951c280b097af40ad162d9ca90.jpg" alt="" title="点击加载视频" onclick="this.outerHTML='<embed height=\'500\' width=\'900\' quality=\'high\' allowfullscreen=\'true\' type=\'application/x-shockwave-flash\' src=\'http://share.acg.tv/flash.swf\' flashvars=\'aid=2114565&amp;page=1\' pluginspage=\'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\'></embed>'">

我发现引用B站的视频时，视频会自动加载，而不是像优酷土豆那样点击之后才开始加载。为了解决这个问题，我先用一张图片代替视频，当点击图片的时候再加载播放器。这里面用到了outerHTML这个属性，它可以改变标签本身的html代码。上例中，图片点击后，整个img标签的html代码都变成了引用播放器的代码了，图片这个元素已经不存在了。
需要注意的是，写在js中的html需要转换成js格式。另外由于oncilck后是用双引号包含js代码，所以要用单引号包含html代码。

js中使用outerHTML改变标签本身的内容