如何在JavaScript中创建链接?

2021年3月9日15:56:52 发表评论 900 次浏览

给定一个HTML文档, 任务是创建一个JavaScript链接, 并使用JavaScript将其添加到文档中。

方法:

  • 创建锚点<a>元素。
  • 创建带有一些文本的文本节点, 该文本将显示为链接。
  • 将文本节点附加到锚点<a>元素。
  • 设置<a>元素的title和href属性。
  • 在正文中添加<a>元素。

范例1:在此示例中, 将通过JavaScript方法创建节点并设置属性。

<!DOCTYPE HTML> 
< html > 
     < head > 
         < title > 
             How to create a link in JavaScript ?
         </ title >
     </ head > 
      
     < body style = "text-align:center;" >
          
         < h1 style = "color:green;" > 
             lsbin
         </ h1 >
          
         < p id = "GFG_UP" style =
             "font-size: 19px; font-weight: bold;" >
         </ p >
          
         < button onclick = "GFG_Fun()" >
             click here
         </ button >
          
         < p id = "GFG_DOWN" style =
             "color: green; font-size: 24px; font-weight: bold;" >
         </ p >
          
         < script >
             var el_up = document.getElementById("GFG_UP");
             var el_down = document.getElementById("GFG_DOWN");
              
             el_up.innerHTML = "Click on the button to generate "
                     + "a link using JavaScript.";
              
             function GFG_Fun() {
                  
                 // Create anchor element.
                 var a = document.createElement('a'); 
                  
                 // Create the text node for anchor element.
                 var link = document.createTextNode("This is link");
                  
                 // Append the text node to anchor element.
                 a.appendChild(link); 
                  
                 // Set the title.
                 a.title = "This is Link"; 
                  
                 // Set the href property.
                 a.href = "https://www.lsbin.org"; 
                  
                 // Append the anchor element to the body.
                 document.body.appendChild(a); 
             }
         </ script > 
     </ body > 
</ html >

输出如下:

在单击按钮之前:

如何在JavaScript中创建链接?1

单击按钮后:

如何在JavaScript中创建链接?2

范例2:此示例与上面的示例相似, 但是使用prepend()方法将锚点元素添加到主体。

<!DOCTYPE HTML> 
< html > 
     < head > 
         < title > 
             How to create a link in JavaScript ?
         </ title >
     </ head > 
      
     < body style = "text-align:center;" >
          
         < h1 style = "color:green;" > 
             lsbin
         </ h1 >
          
         < p id = "GFG_UP" style =
             "font-size: 19px; font-weight: bold;" >
         </ p >
          
         < button onclick = "GFG_Fun()" >
             click here
         </ button >
          
         < p id = "GFG_DOWN" style =
             "color: green; font-size: 24px; font-weight: bold;" >
         </ p >
          
         < script >
             var el_up = document.getElementById("GFG_UP");
             var el_down = document.getElementById("GFG_DOWN");
              
             el_up.innerHTML = "Click on the button to generate "
                     + "a link using JavaScript.";
              
             function GFG_Fun() {
                  
                 // Create anchor element.
                 var a = document.createElement('a'); 
                  
                 // Create the text node for anchor element.
                 var link = document.createTextNode("This is link");
                  
                 // Append the text node to anchor element.
                 a.appendChild(link); 
                  
                 // Set the title.
                 a.title = "This is Link"; 
                  
                 // Set the href property.
                 a.href = "https://www.lsbin.org"; 
                  
                 // Append the anchor element to the body.
                 document.body.prepend(a); 
             }
         </ script > 
     </ body > 
</ html >

输出如下:

在单击按钮之前:

如何在JavaScript中创建链接?3

单击按钮后:

如何在JavaScript中创建链接?4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: