условно перемещение элемента html

Question

Я пытаюсь проверить, можно ли условно переместить элемент html с помощью JS?

Идея в том, что у меня есть изображение, которое было возвращено. Я хотел бы, чтобы он был на той же строке, что и заголовок, а заголовок перемещен вправо (выделение пространства для 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>

Это показывает один из нескольких способов, чтобы добавить изображение в/рядом с названием.

Нажмите кнопку RUN несколько раз, чтобы показать, как он реагирует на ответы без изображения.

Если это не отвечает на ваш вопрос, тогда вам нужно указать лучшее описание в своем посте, с дополнительной информацией. Возможно, JSFiddle с ожидаемым результатом.