我有一个标题的字符串和一个链接的字符串。我不确定如何使用JavaScript将它们组合在一起,创建一个链接放置在页面上。感谢任何帮助。
我尝试弄清楚这个问题的原因是我有一个RSS源,其中有一系列的标题和URL。我想将标题链接到相应的URL以使页面更有用。
我正在使用jQuery,但完全不熟悉它,并不知道它可以在这种情况下提供帮助。
我有一个标题的字符串和一个链接的字符串。我不确定如何使用JavaScript将它们组合在一起,创建一个链接放置在页面上。感谢任何帮助。
我尝试弄清楚这个问题的原因是我有一个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>
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);
document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';
or, as suggested by @travis :
document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);
<script type="text/javascript">
//note that this case can be used only inside the "body" element
document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
</script>
$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));
$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));
var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);
desiredLink
是一个变量,它保存您的锚点元素指向的地址,desiredText
是一个变量,它保存将显示在锚点元素中的文本。document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);
。它的意思是在网页中添加一个链接,链接的文字是desiredText
,链接的地址是desiredLink
。 - travis+
)和.innerHTML
。在 jQuery 中,.attr("href", desiredLink)
和 .text(desiredText)
是您想要的。 - Wes Turner使用JavaScript创建链接:
<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>
或者
<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>
或者
<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>
有几种方法:
如果你想使用原生JavaScript(没有像jQuery这样的帮助程序),那么可以这样做:
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>");
var anchorElem = document.createElement('a');
anchorElem.setAttribute("href", yourLink);
anchorElem.innerHTML = yourLinkText;
document.body.appendChild(anchorElem); // append your new link to the body
anchorElem.text = yourLinkText;
而不是 innerHTML,这样会更清晰。当然,考虑一下如果 yourLinkText 是 " <- 酷!" 会发生什么。 - Nadu <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>
'Anchor Object'有自己(继承的)属性来设置链接和文本。所以只需要使用它们。 setAttribute 更通用,但通常不需要使用它。 a.title ="Blah"
将执行相同的操作并且更加清晰!
当需要使用setAttribute的情况是: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
保持协议开放。 不要使用 http://example.com/path,而应该直接使用 //example.com/path。 检查 example.com 是否可以通过 http: 和 https: 访问,但 95% 的站点都可以正常工作。
离题:这与在JS中创建链接没有关系,
但也许值得知道:
有时候你可以使用 $("body")
而不是 document.querySelector("body")
,比如在Chrome dev-console中。 _ $ = document.querySelector
将在第一次使用时出现“非法调用”错误。这是因为赋值只是“抓取” .querySelector(对class方法的引用)。使用 .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">点击这里</A>