2015-11-05 37 views
1

添加到一個元素沒有ID我有以下的html代碼:我怎麼能一個HTML與JavaScript沒有jQuery的

<div class="someclass"> 
     <ul> 
      <li><a title="someFile" href="somefolder/somefile.pdf">File Name</a> 
      <li><a title="someFile2" href="somefolder/somefile2.pdf">File 2</a> 
     </ul> 
    </div> 

我想的鏈接變爲:

<li><a title="someFile" href="somefolder/somefile.pdf" target="_blank">File Name</a> 
    <li><a title="someFile2" href="somefolder/somefile2.pdf" target="_blank">File 2</a> 

可以這樣來用純javascript完成,沒有jQuery或其他庫?

我用jquery使用getElementByID做了類似的事情,但是這裏的元素沒有id,它擁有的只是類「someclass」,並且由於各種原因,我不想更改html。我所要做的僅僅是在當文檔使用加載將要執行的頁面的底部插入小的javascript:

window.onload="myFunction()"; 

可以這項任務上,我想做的方式來完成它?

+0

jQuery是用Javascript編寫的。所以jQuery可以做的所有事情都可以用Javascript完成。 – Ivar

+0

因爲我明白只有_target_屬性的區別? –

回答

2
var links = document.querySelector('.someclass').getElementsByTagName('a'); 

Array.prototype.forEach.call(links, function(el) { 
    // set attribute 
    el.setAttribute('target','_blank'); 
}); 

的工作示例

這個答案見http://jsfiddle.net/sjmcpherso/krktmghd/是IE9 +所以是的,你並不真正需要的jQuery

-2

看看這裏。

http://www.w3schools.com/js/js_htmldom_nodes.asp

如圖所示,這是你可以用只有JavaScript做

var para = document.createElement("p"); //create p element 
var node = document.createTextNode("This is new."); //create text element 
para.appendChild(node); //append text to p 

var element = document.getElementById("div1"); 
element.appendChild(para); //append p to somewhere in your page 
+0

請在回答之前嘗試瞭解問題 –

2

試試這個什麼:

var pageLinks = document.getElementsByTagName("a"); 
for(var x in pageLinks) { 
    pageLinks[x].target = "_blank"; 
} 
+0

這也行得通,但問題是在新窗口中打開所有鏈接,接受的答案只是打開特定課程中的內容。不錯,但是。 – user2417624

4

你只需要寫

var matches = document.querySelectorAll('a'); 
for (var i = 0; i < matches.length; i++) { 
    matches[i].setAttribute('target', '_blank'); 
} 

Fiddle

1

就試試這個:

var prnt = document.querySelector('.someclass ul').childNodes; 
for(var i=0;i<prnt.length;i++){ 
    if(prnt[i].nodeType == 1){ 
     prnt[i].firstChild.setAttribute('target','_blank');   
    } 
} 

輸出:

<div class="someclass"> 
    <ul> 
     <li><a title="someFile" href="somefolder/somefile.pdf" target="_blank">File Name</a> 
     <li><a title="someFile2" href="somefolder/somefile2.pdf" target="_blank">File 2</a> 
    </ul> 
</div> 

Working Demo