附加<a>和</a> <a><img></a> <a>to document.body刪除href和src</a>

Question

因此，我正在創建一個像這樣的文章塊：

<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>

如果我創建一個文章塊，那么一切都很好。 當我創建文章塊數組時，就會出現問題。 除最后一個塊外，每個塊都會丟失其'a'和'img'標簽的href和src。 出現一個空的圖像框，並且出現沒有鏈接的文本。 誰能解釋它發生的原因以及我該如何改變？

輸出 I打印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.log(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);
  });
}

Answer 1

如果僅按OP代碼進行操作，則不會將任何內容附加到DOM。 <article>已創建並且所有內容都附加到它，但是它從未找到通往DOM的方法。

處理完之后，您必須注意分配給圖像的網址。 如果您將安全內容與不安全內容混合使用，它們將失敗。

受保護的內容：

<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/ug-F93H7K0.jpg?w=900&h=900&p=0", "https://imgc.allpostersimages.com/img/print/ug-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>

參考

什么是DOM？

文檔片段

附加<a>和</a> <a><img></a> <a>to document.body刪除href和src</a>

問題描述

1 個解決方案

解決方案1
0 2018-04-06 02:49:56

演示版

參考

附加<a>和</a> <a><img></a> <a>to document.body刪除href和src</a>

問題描述

1 個解決方案

解決方案1 0 2018-04-06 02:49:56

演示版

參考

解決方案1
0 2018-04-06 02:49:56