如何在JavaScript中设置`appendLink`?

时间:2017-03-11 01:06:43

标签: javascript hyperlink

后建模:

function appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
}

appendPre('Files:');

如何制作允许我使用appendLink打印链接的appendLink('link')功能?

这是我到目前为止所做的:

function appendLink(url) {
  var link = document.createElement('a');
  var textContent = document.createTextNode(url + '\n');
  link.appendChild(textContent);
  link.href = 'test.com';
}

2 个答案:

答案 0 :(得分:1)

这是一个从给定urltext生成链接(锚元素)的函数:

function link (url, text) {
  var a = document.createElement('a')
  a.href = url
  a.textContent = text || url
  return a
}

以下是如何将其整合到您的表格中(基于我对your other question的回答):

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>

答案 1 :(得分:0)

您可以为链接的文字使用不同的参数:

&#13;
&#13;
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');
&#13;
<div id="link"></div>
&#13;
&#13;
&#13;