Создание HTML с JavaScript

Question

я здесь этот код:

var photo = place.photos[0].getUrl({ 'maxWidth': 50, 'maxHeight': 50 }); 
      var sideClick = jQuery("<a class=side_click href='#'></a>"); 
      $(sideClick).html(place.name+place.rating); 
      $("#side_bar").append("<div class='elemenat'><div class='draggable'><img style='margin-left:3px; margin-top:5px;' src="+ photo +" width='46' height='42' /></div><div class='elementname'>").append(sideClick).append("</div></div>"); 
      $(sideClick).on("click", function() { 
       markers[i].modalWindow_.getDetails(markers[i].place_); 
      }); 
      } 

и этот код визуализации:

<div id="side_bar"> 
     <div class="elemenat"> 
      <div class="draggable ui-draggable"> 
        <img style="margin-left:3px; margin-top:5px;" src="https://lh6.googleusercontent.com/-T0_fJX5zza0/UdSnOaucZvI/AAAAAAAAAFc/gQhK3IbHJfY/w50-h50-s0/Small%2BLogo.png" width="46" height="42"></div> 
      <div class="elementname"></div></div> 

<a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a> 

Как я должен изменить JS код для отображения HTML, где <a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a> будет в <div class="elementname"></div> так

должно быть оказано следующим образом:

<div class="elementname"> 
     <a class="side_click" href="#">James Cook Hotel Grand Chancellor3.6</a> 
</div> 

Answer 1

Не создавать элементы сырой HTML текстом. Вместо этого использует возможности манипулирования DOM jQuery. Это значительно упрощает понимание, поддержку и снижение вероятности ошибок.

Так вместо того, чтобы что-то вроде:

var sideClick = jQuery("<a class=side_click href='#'></a>"); 
$(sideClick).html(place.name + place.rating); 

Это лучше сделать:

var sideClick = $("<a>").addClass('side_click').attr('href', '#') 
         .text(place.name + place.rating); 

Помимо того, что легче структурировать и определить ошибки, вы также получите дополнительное преимущество вытекающее в place.name + place.rating строка.

---

Проверьте обновленный код, используя этот подход (и конечный результат вы ожидали):

var photo = place.photos[0].getUrl({ 
    'maxWidth': 50, 
    'maxHeight': 50 
}); 

var elemenatDiv = $('<div>').addClass('elemenat'); 
var draggableDiv = $('<div>').addClass('draggable'); 
var logo = $('<img>').css({'margin-left': '3px', 'margin-top': '5px'}) 
        .attr('src', photo).attr('width', 46).attr('height', 42) 
var sideClick = $("<a>").addClass('side_click').attr('href', '#') 
         .text(place.name + place.rating); 
var elementnameDiv = $('<div>').addClass('elementname'); 

elemenatDiv.append(draggableDiv.append(logo)); 
elemenatDiv.append(elementnameDiv.append(sideClick)); 

$("#side_bar").append(elemenatDiv); 

$(sideClick).on("click", function() { 
    markers[i].modalWindow_.getDetails(markers[i].place_); 
}); 

See demo fiddle here.

Answer 2

Append sideclick к ELEMENTNAME DIV, а не к side_bar DIV

var element = $("<div class='elemenat'><div class='draggable'><img style='margin-left:3px; margin-top:5px;' src="+ photo +" width='46' height='42' /></div>"); 

var elementName = $(<div class='elementname'>); 

element.append(elementName); 
elementName.append(sideclick); 
$("#side_bar").append(element); 

Answer 3

Посмотрите на http://api.jquery.com/category/manipulation/.

У вас есть несколько различных вариантов. Вы можете просто изменить порядок, в котором вы добавляете вещи, использовать методы InsertAfter или InsertBefore или мою личную рекомендацию, помещая все в DOM, а затем используя функцию wrap(), чтобы обернуть ссылку side_click с div.

Что-то вроде

\\append everything 
$('.side_click').wrap('<div class="elementname" />');