Как динамически создать список в JavaScript и отобразить в HTML - PullRequest
Новая
       23

Как динамически создать список в JavaScript и отобразить в HTML

0 голосов
/ 04 февраля 2019

Я играю с веб-разработкой и пытаюсь протестировать некоторый динамически сгенерированный контент, в частности просто перечислить во всплывающем окне Chrome Extension все ссылки на странице сайта.Я ссылался на замечательный ресурс здесь , но я тестировал с тегом output против ul и созданием li для этого списка, чтобы показать на странице.

popup.html 

<div>
  <h3>Page output</h3>
  <output id="outputkey3">pages go here</output>
</div>

popup.js 

function (tabs) {
  var tab = tabs[0];
  var url = tab.url;
  if (url != null) {
      var host = new URL(url).hostname;
    ...

var outputKey3 = document.getElementById("outputKey3")
if (outputKey3 != null) {
  for(var i = document.links.length; i --> 0;) {
    if(document.links[i].hostname === host) {
      //urls.push(document.links[i].href);
      outputKey3.appendChild(document.links[i]);
    }
  }
}

Даже для одной ссылки это не работает.Не уверен, если это должно быть сделано со списком по сравнению с другим элементом, который не форматирует данные с предыдущим числом или •.Что я действительно хотел бы сделать, так это просто показать список, который выглядит как новая строка данных для каждого значения индекса, возможно, как набор p.

1 Ответ

0 голосов
/ 04 февраля 2019

У вас есть пара вещей, идущих против вас здесь в вашем коде.

  1. host никогда не определяется.Вы, вероятно, имеете в виду location.host
  2. Вы редко хотите сравнивать хост с именем хоста.Один включает в себя порт, а другой - нет.
  3. В качестве рекомендации рекомендуется использовать клонированную форму массива.Это связано с тем, что список может изменяться во время вычислений.
  4. document.links включает все ссылки, в том числе добавленные вами.Еще одна причина скопировать массив перед изменением содержимого страницы.
  5. appendChild() попытается переместить <a>, и это может привести к поломке остальной части страницы.Возможно, вы хотите клонировать элемент.
  6. <output> может иметь семантику, которая запрещает добавления.Он предназначен для вычисленных результатов и может иметь только фразовое содержание .Попробуйте сменить на <div>, если вы не хотите <ul>.

Предложение с использованием клона 

var outputKey3 = document.getElementById("outputKey3")
if (outputKey3 != null) {
  // Get new array of filtered links
  // Document.links is not an array, but can be used by Array.prototype
  let links = Array.prototype.filter.call(document.links, function(link) {
    return (link.hostname === location.hostname)
      && (link.parentElement !== outputKey3);
  });
  // For each link, change its value to a clone of it
  let newLinks = link.map(function(link) {
    return link.cloneNode();
  });
  // For each clone, add it to the list.
  newLinks.forEach(function(link) {
    outputKey3.appendChild(link);
  });
}

Если выдолжен использовать цикл for: 

var outputKey3 = document.getElementById("outputKey3")
if (outputKey3 != null) {
  for(var i = document.links.length; i-- > 0;) {
    if((document.links[i].hostname === location.hostname)
    && (link.parentElement !== outputKey3)) {
      //urls.push(document.links[i].href);
      outputKey3.appendChild(document.links[i].cloneNode());
    }
  }
}
...