有条件地移动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有预期的结果。