Добавление <a> и <img> к document.body удаляет href и src
Итак, я создаю такой блок статей:
<article>
<figure>
<img src = "source" />
</figure>
<div>
<a href = "link"/>
</div>
</article>
Это мой код js:
var linkElement = document.createElement('a');
var linkText = document.createTextNode(*some text*);
linkElement.appendChild(linkText);
linkElement.href = *link*;
var imgElement = document.createElement('img');
imgElement.setAttribute("src", *some path*);
imgElement.setAttribute("width", "304");
imgElement.setAttribute("height", "228");
imgElement.setAttribute("alt", temp["name"]);
var article = document.createElement("article"),
figure = document.createElement("figure"),
div = document.createElement("div");
div.appendChild(linkElement);
figure.appendChild(imgElement);
article.appendChild(figure);
article.appendChild(div);
document.querySelector('article').appendChild(article);
Это мой html-код:
<body>
<header></header>
<section>
<article></article>
</section>
<footer></footer>
<script src = *src of my js*></script>
</body>
Если я создаю один блок статей, все нормально. Проблема возникает, когда я создаю массив блоков статей. Каждый блок, кроме последнего, теряет свои href и src для тегов 'a' и 'img'tags. Появится пустое поле изображения и появится текст без ссылки. Может ли кто-нибудь объяснить, почему это происходит и как я могу это изменить?
Выход Я распечатываю список страниц фильмов FB с их изображением и ссылками на страницу.
Мой исходный код:
// data has a list of FB movie pages, each containing the name of t he movie and page id
function print(data)
{
//iterates through the object passed to print movie names in console.
var target = document.querySelector('article');
var docFrag = document.createDocumentFragment();
for (var i = 0; i < data.length; i++)
{
var temp = data[i];
var linkElement = document.createElement('a');
var linkText = document.createTextNode(temp["name"]);
linkElement.appendChild(linkText);
//getting the link to the movie's FB page
getLink(function(response){linkElement.href = response;},temp["id"]);
var imgElement = document.createElement('img');
//getting the src of the picture of the movie's page
getPic(function(response){imgElement.setAttribute("src", response);},temp["id"]);
imgElement.setAttribute("width", "304");
imgElement.setAttribute("height", "228");
imgElement.setAttribute("alt", temp["name"]);
var article = document.createElement("article"),
figure = document.createElement("figure"),
div = document.createElement("div");
div.appendChild(linkElement);
figure.appendChild(imgElement);
article.appendChild(figure);
article.appendChild(div);
console.info(article);
docFrag.appendChild(article);
}
target.appendChild(docFrag);
}
function getLink(callback,id)
{
FB.api('/'+id+'?fields=link', function(response)
{
callback(response.link);
});
}
function getPic(callback,id)
{
FB.api('/'+id+'?fields=cover{source}', function(response)
{
callback(response.cover.source);
});
}
Я пропустил ту часть, когда вы действительно добавляете статью в тело ... хм? Или .boxes
@ zer00ne Извините, моя ошибка. Это строка: document.querySelector ('article'). AppendChild (linkElement);
@acdcjunior Я думал, что добавление статьи к документу .body создало своего рода массив. Это то, что я имел в виду.
@JithinJacob, что это за синтаксис: *link*? звездочки вместо кавычек? В любом случае см. Мой ответ, в котором используются массивы для уникальных значений, но используется цикл для генерации общих элементов. Обратите внимание, что фактическое манипулирование DOM выполняется только один раз.
document.querySelector('article').appendChild(linkElement); невозможно, потому что это уже было сделано: div.appendChild(linkElement);. Даже если бы это было возможно, у вас была бы ссылка в DOM, но у вас все еще есть <img> и <figure>, прикрепленные к <article>, которые все еще плавают, никогда не добавляются к DOM.
@ zer00ne Мне еще раз жаль. строка должна была быть document.querySelector ('article'). appendChild (article);
@JithinJacob Это должно сработать, я думаю, проблема больше не свежа в моей голове. У вас есть проблемы с моим ответом?
Обратите внимание, что тег <img> не использует и не требует закрывающей косой черты, и никогда не использовался.
Я создаю блок изображения динамически. Таким образом, косая черта не будет частью кода. Это была опечатка. мне жаль
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если просто следовать коду OP, он никогда ничего не добавляет в DOM. <article> создан, и все добавлено к нему, но он никогда не попадает в DOM.
Как только об этом позаботятся, вы должны помнить об URL-адресах, присвоенных вашим изображениям. Они потерпят неудачу, если вы смешаете защищенный контент с незащищенным.
Защищенный контент:
<img src='https://....>
Незащищенный контент:
<img src='http://....>?
Кстати, эта демонстрация многоразовая и легко расширяемая. Простое требование состоит в том, что для каждого <article> вы должны добавить соответствующий URL-адрес в массивы url[] и posters[]. Также упрощена компоновка: <img> вложен в <a>, <a> вложен в <fig>, а <fig> вложен в <article>. Такое расположение делает весь <img> связью.
Демо
Детали, прокомментированные в Демо, и ссылки расположены под Демо.
// Array of urls to sites for lnk.href
var urls = ['https://www.starwars.com', 'https://www.marvel.com'];
// Array of urls to images for img.src
var posters = ["https://imgc.allpostersimages.com/img/print/u-g-F93H7K0.jpg?w=900&h=900&p=0", "https://imgc.allpostersimages.com/img/print/u-g-F90CQI0.jpg?w=900&h=900&p=0"];
// Reference the DOM target
var target = document.querySelector('.action');
/* Create a DocumentFragment Object to add all of your articles
|| to. The only thing you should ever append to the DOM is the
|| docFrag. It's costly to add to DOM so do it only once.
*/
var docFrag = document.createDocumentFragment();
/* One loop will:
|| - create the 4 components: article, figure, a, img
|| - get the urls from the 2 arrays and assign them to
|| lnk.href and img.src
|| - set the additional attributes to img
|| - append components: img to a--a to fig--fig to art--art to
|| docFrag--docFrag to target(a section attached to the DOM)
*/
/* This `for` loop will go 2 times because the .length of urls[]
|| array is 2 (note: i < urls.length)
*/
for (let i = 0; i < urls.length; i++) {
var art = document.createElement('article');
var fig = document.createElement('figure');
var lnk = document.createElement('a');
lnk.href = urls[i];
var img = document.createElement('img');
img.src = posters[i];
img.width = '200';
img.height = '300';
lnk.appendChild(img);
fig.appendChild(lnk);
art.appendChild(fig);
docFrag.appendChild(art);
}
target.appendChild(docFrag);<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<header></header>
<main>
<section class = "action"></section>
</main>
<footer></footer>
</body>
</html>Справка
Я считаю, что мой код правильный. Но я получаю ссылки и исходники img из FB SDK, который использует асинхронные вызовы. Итак, когда я пытаюсь назначить ссылки и источники переменным, ему присваиваются нулевые значения до того, как функция вернет требуемые значения. Я думаю, мне следует начать новую тему по этому поводу. Спасибо за вашу помощь.
Поскольку это правильно (но не работает), не могли бы вы объяснить эту часть: linkElement.href = *link*;? и вы сказали: «Я думал, что добавление статьи к документу .body создало своего рода массив». В этом очень мало смысла. Синтаксис *link* взят из FB SDK?
Я имел в виду ссылка на сайт, как в какая-то ссылка, как и в строке выше в createTextNode (какой-то текст).
И под сортировкой массива я имел в виду, что поскольку мы добавляем вновь созданные статьи в DOM, это было аналогично добавлению элементов в массив
Как вы создаете массив? Покажите код с проблемой.