programing

자바스크립트를 사용하여 링크를 만들려면 어떻게 해야 합니까?

lastmoon 2023. 7. 31. 21:47
반응형

자바스크립트를 사용하여 링크를 만들려면 어떻게 해야 합니까?

나는 제목을 위한 문자열과 링크를 위한 문자열을 가지고 있습니다.자바스크립트를 사용하여 페이지에 링크를 만들기 위해 두 가지를 어떻게 결합해야 할지 모르겠습니다.어떤 도움이든 감사합니다.

제가 이것을 알아내려는 이유는 RSS 피드가 있고 제목과 URL 목록이 있기 때문입니다.URL에 제목을 연결하여 페이지를 유용하게 만들고 싶습니다.

저는 jQuery를 사용하고 있지만 완전히 처음 사용하는 제품이라 이 상황에서 도움이 될 수 있는지 몰랐습니다.

<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

JavaScript 포함

  1. var a = document.createElement('a');
    a.setAttribute('href',desiredLink);
    a.innerHTML = desiredText;
    // apend the anchor to the body
    // of course you can append it almost to any other dom element
    document.getElementsByTagName('body')[0].appendChild(a);
    
  2. document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';
    

    또는, @filename에 의해 제안된 대로:

    document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);
    
  3. <script type="text/javascript">
    //note that this case can be used only inside the "body" element
    document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
    </script>
    

JQuery 포함

  1. $('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));
    
  2. $('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));
    
  3. var a = $('<a />');
    a.attr('href',desiredLink);
    a.text(desiredText);
    $('body').append(a);
    

위의 모든 예에서 '본체'뿐만 아니라 모든 요소에 앵커를 추가할 수 있습니다.desiredLink앵커 요소가 가리키는 주소를 유지하는 변수입니다.desiredText앵커 요소에 표시될 텍스트를 보유하는 변수입니다.

JavaScript를 사용하여 링크 만들기:

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

OR

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

OR

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

몇 가지 방법이 있습니다.

JQuery와 같은 도우미 없이 원시 Javascript를 사용하려면 다음과 같은 작업을 수행할 수 있습니다.

var link = "http://google.com";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "your text";

// and append it to where you'd like it to go:
document.body.appendChild(element);

다른 방법은 링크를 문서에 직접 쓰는 것입니다.

document.write("<a href='" + link + "'>" + text + "</a>");

원시 JavaScript로 하이퍼링크를 동적으로 만듭니다.

   var anchorElem = document.createElement('a');
   anchorElem.setAttribute("href", yourLink);
   anchorElem.innerHTML = yourLinkText;

   document.body.appendChild(anchorElem); // append your new link to the body

    <script>
      _$ = document.querySelector  .bind(document) ;

        var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
        var a   =  document.createElement( 'a' )
        a.text  = "Download example" 
        a.href  = "//bit\.do/DeezerDL"

        AppendLinkHere.appendChild( a )
        

     // a.title = 'Well well ... 
        a.setAttribute( 'title', 
                         'Well well that\'s a link'
                      );
    </script>

  1. '앵커 개체'에는 링크와 해당 텍스트를 설정하기 위한 고유한 *(상속됨)* 속성이 있습니다.그러니 그냥 사용하세요. .setAttribute가 더 일반적이지만 일반적으로 필요하지 않습니다.a.title ="Blah"똑같이 할 것이고 더 명확할 것입니다!.setAttribute가 필요한 상황은 다음과 같습니다.var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  2. 프로토콜을 열어 둡니다.http://example.com/path 대신 //example.com/path 을 사용하는 것이 좋습니다.https: 및 https:로 example.com 에 액세스할 수 있는지 확인합니다. 그러나 사이트의 95%가 두 사이트 모두에서 작동합니다.

  3. 주제에서 벗어남: JS에서 링크를 생성하는 것과 관련이 없지만 다음과 같이 알아두면 좋습니다.음, 때때로 당신이 사용할 수 있는 크롬 개발 콘솔과 같은.$("body")대신에document.querySelector("body") A _$ = document.querySelector처음 사용할 때 불법 호출 오류를 사용하여 사용자의 노력을 '칭찬'합니다.이는 할당이 .querySelector(클래스 메소드 참조)만 'grabs'하기 때문입니다.와 함께.bind(...당신은 또한 맥락을 포함할 것입니다(여기에 있습니다).document) 그러면 예상대로 작동하는 객체 메소드를 얻을 수 있습니다.

요소를 만드는 더럽지만 빠른 방법:


const linkHTML = `<a
  class="my-link"
  style="position: absolute; right: 0"
  href="https://old.reddit.com"
  title="Go to old reddit"
>
  Old Reddit
</a>`;

  // create element
  const linkEl = strToElement(linkHTML);

  // add element to document.body
  document.body.appendChild(linkEl);

// utility function that converts a string to HTML element
function strToElement(s) {
  let e = document.createElement('div');
  const r = document.createRange();
  r.selectNodeContents(e);
  const f = r.createContextualFragment(s);
  e.appendChild(f);

  e = e.firstElementChild;
  return e;
}

이것을 안쪽에 붙여넣습니다.

<A HREF = "index.html">Click here</A>

언급URL : https://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript

반응형