提取页面里blockquote元素的cite值并将其在页面指定位置显示出来
JS部分:
<script type="text/javascript">
function showQuoteSite(){
var quotes = document.getElementsByTagName("blockquote");
for (var i=0; i<quotes.length; i++) {
var url = quotes[i].getAttribute("cite");
var quoteChildren = quotes[i].getElementsByTagName("*");//每个quote元素里所有元素节点(是一个数组)
var elem = quoteChildren[quoteChildren.length - 1];// 所有元素节点里的最后一个元素节点 赋给变量elem
var link = document.createElement("a");
var link_text = document.createTextNode("source");
link.appendChild(link_text);
link.setAttribute("href",url);
var sups = document.createElement("sup");
sups.appendChild(link);
elem.appendChild(sups);
}
}
window.onload = showQuoteSite;
</script>
html部分:
<blockquote cite="http://hi.baidu.com/nowarszm">
<p>清明时节雨纷纷,路上行人欲断魂。借问酒家何处有,牧童遥指杏花村</p>
<p>故人西辞黄鹤楼,烟花三月下扬州。孤帆远影碧空尽,唯见长江天际流。</p>
</blockquote>
主要用到的方法 getElementsByTagName getAttribute···appendChild···
值得一提的是代码里的:var elem = quoteChildren[quoteChildren.length - 1];
这样写可以确保找到blocquote的最后一个子节点是元素节点 因为前面的var quoteChildren = quotes[i].getElementsByTagName("*");已经定好是是Tag