有條件地移動html元素

Question

我想看看是否有可能有條件地移動使用JS的html元素？

這個想法是，如果我有一個返回的圖像，我希望它與標題相同，標題移動到右側（爲左側的img分配空間）。可能嗎？

最好是在handlebars輔助方法或標準js文件中完成嗎？

，我沿

//thumbnail conditional moving title if exists 
if(results.thumbnail != 0) { 
    //do something here 
} 

Answer 1

林的線不知道如果我理解你正確地思考問題的東西。

這是有點正確的方向嗎？

無論如何，您的信息非常模糊。我認爲這個劇本的邏輯是正確的。修改它以滿足您的需求。

// DUMMY RESPONSE FROM "API" 
 
var response = [{ 
 
    title: "Hello World, with image", 
 
    image: "http://placehold.it/200/200" 
 
}, { 
 
    title: "Hello World, no image", 
 
    image: "" 
 
}] 
 

 

 
//JUST TO VARY THE RESULT A BIT, SELECT A RANDOM POST FROM THE RESPONSE. 
 
var post = response[getRandomInt(0, 1)]; 
 

 
// SELECT THE FIRST (AND IN THIS SCRIPT, ONLY) H1 TAG 
 
var elem = document.getElementsByTagName("h1")[0]; 
 

 
// SET THE TEXT OF THE H1 TAG TO BE EQUAL THE POST TITLE 
 
elem.innerText = post.title; 
 

 
// IF THE "IMAGE" PROPERTY OF THE RESPONSE CONTAINS A STRING/VALUE THAT HAS 
 
// A LENGTH, BIGGER THEN 0 - WE ASSUME THERE IS A LINK IN THERE TO THE IMG. 
 
if (post.image.length > 0) { 
 

 
    // ADD THE IMG HTML, AND APPEND THE CURRENT TEXT OF THE ELEMENT 
 
    // THIS ALL HAPPENS INSIDE THE "H1" ELEMENT. 
 

 
    elem.innerHTML = '<img src="' + post.image + '" /> ' + elem.innerText; 
 
} 
 

 

 

 
/** 
 
* Returns a random integer between min (inclusive) and max (inclusive) 
 
* Using Math.round() will give you a non-uniform distribution! 
 
* Credits: http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range 
 
*/ 
 
function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
}

<h1></h1>

這顯示了幾種方法可以在一個/下添加圖片後，您的標題之一。

單擊「運行」幾次以顯示它如何響應沒有圖像的響應。

如果這不能回答你的問題，那麼你需要在你的文章中提供更好的描述，並提供更多信息。也許JSFiddle有預期的結果。