2015-04-29 51 views
1

I intend to re-use HTML DOM's create element method described in W3Schools動態創建元素,但對我的表單使用<a href> instead of a button onClick

function myFunction() { 
 
    var btn = document.createElement("BUTTON"); 
 
    var t = document.createTextNode("CLICK ME"); 
 
    btn.appendChild(t); 
 
    document.body.appendChild(btn); 
 
}
<p>Click the button to make a BUTTON element with text.</p> 
 

 
<button onclick="myFunction()">Try it</button>

在上面的例子,一個button用於創建一個HTML元素。我怎樣才能改變這個使用href鏈接(一個<a>標籤)而不是一個按鈕的點擊事件?爲了防止瀏覽器進行導航

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the button to make a BUTTON element with text.</p> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 
    var btn = document.createElement("a"); 
btn.innerHTML="click"; 
    var t = btn.setAttribute("href","https://www.google.com"); 
btn.setAttribute("target","_blank"); 
    document.body.appendChild(btn); 
} 
</script> 

</body> 
</html> 
+0

將'button'更改爲'a',並將所有內容保持不變。大概。按照StackOverflow指導方針的要求,當您不向我們展示代碼_in本身的問題時,很難知道您想要什麼。 –

+0

將參考代碼添加到問題(即使是來自其他網站)以及從該網站獲取該網站的鏈接,總是更好。關鍵信息位於外部網站的問題往往會在鏈接頁面未來不可用時失去其價值。另外,避免添加對於這個問題不需要的標籤(本例中爲jQuery),因爲它會導致您是否在尋找普通的JS回答或基於jQuery的回答。 – Harry

+0

謝謝哈利。注意點 –

回答

0

更改標籤錨,設置HREF到"javascript:void(0)"

+0

謝謝@Mehrzad Chehraz –

+0

此解決方案完美工作 –

0

您可以在相同的例子這樣寫你refered​​3210作爲。

<!DOCTYPE html> 
<html> 
<body> 

<p>Click the link to make a BUTTON element with text.</p> 

<a href="javascript:void(0)" onclick= "myFunction()" > Try it</a> 

<script> 
function myFunction() { 
      var btn = document.createElement("BUTTON"); 
      var t = document.createTextNode("CLICK ME"); 
      btn.appendChild(t); 
      document.body.appendChild(btn); 
     } 
</script> 

</body> 
</html> 
0

我是否正確理解您要使用標記而不是觸發事件的元素的元素?

基本上你能做到這一點,就像在例如:

<a onclick="myFunction()">Try it</a> 

而且你還可以給-tag href屬性。但在這裏你已經看到了這個「解決方案」的問題。 onclick函數和href鏈接都會被觸發,你肯定會有不需要的行爲。

我還假設你只是想讓它成爲你頁面上任何鏈接的樣式,而不是使用href atttribute。然後使用上面的例子將工作。就我個人而言,我仍然更喜歡使用-tag,並自己設計樣式,因爲標籤應僅用於鏈接。

相關問題