[英]How do I set up `appendLink` in JavaScript?
建模后:
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
appendPre('Files:');
如何制作允许我使用appendLink('link')
打印出链接的appendLink
函数?
这是我到目前为止的内容:
function appendLink(url) {
var link = document.createElement('a');
var textContent = document.createTextNode(url + '\n');
link.appendChild(textContent);
link.href = 'test.com';
}
这是一个根据给定的url
和text
生成链接(anchor元素)的函数:
function link (url, text) {
var a = document.createElement('a')
a.href = url
a.textContent = text || url
return a
}
这是将其集成到表中的方法(以我对其他问题的回答为基础):
function link (url, text) { var a = document.createElement('a') a.href = url a.textContent = text || url return a } function appendRow (table, elements, tag) { var row = document.createElement('tr') elements.forEach(function(e) { var cell = document.createElement(tag || 'td') if (typeof e === 'string') { cell.textContent = e } else { cell.appendChild(e) } row.appendChild(cell) }) table.appendChild(row) } var file = { name: 'hello', viewedByMeTime: '2017-03-11T01:40:31.000Z', webViewLink: 'http://drive.google.com/134ksdf014kldsfi0234lkjdsf0314/', quotaBytesUsed: 0 } var table = document.getElementById('content') // Create header row appendRow(table, ['Name', 'Date', 'Link', 'Size'], 'th') // Create data row appendRow(table, [ file.name, file.viewedByMeTime.split('.')[0], link(file.webViewLink), // Note the enclosing call to `link` file.quotaBytesUsed + ' bytes' ])
#content td, #content th { border: 1px solid #000; padding: 0.5em; } #content { border-collapse: collapse; }
<table id="content"> </table>
您可以对链接的文本使用不同的参数:
function appendLink(target, url, text) { var link = document.createElement('a'); var textContent = document.createTextNode(text); link.appendChild(textContent); link.href = url; target.appendChild(link); } var link = document.getElementById('link'); appendLink(link, '//stackoverflow.com', 'Link to Stackoverflow');
<div id="link"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.