用JavaScript創建

HTML我這裏有這樣的代碼：用JavaScript創建

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>

來源

2013-07-12 Mark West

所以我怎麼可以把sideClick到DIV級「的ElementName」？ –

不要建立由原始的HTML文本元素。相反，使用jQuery的DOM操作功能。它使事情變得簡單易懂，易於維護，並且不易出錯。

因此，而不是像這樣：

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.

來源

2013-07-12 13:53:23 acdcjunior

不工作正是我想要的，但是謝謝 –

現在看看。 – acdcjunior

現在代碼呈現這個 –

追加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);

來源

2013-07-12 13:45:32

在哪裏放這個，請寫完整代碼 –

你明白它在做什麼？或者它與您的原始代碼的不同之處如何？ –

看看http://api.jquery.com/category/manipulation/。

您有幾個不同的選項。你可以改變附加順序，使用InsertAfter或者InsertBefore方法，或者我個人的建議，把所有東西放到DOM上，然後使用wrap（）函數將side_click鏈接和div一起包裝起來。

喜歡的東西

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

來源

2013-07-12 13:46:00 araja

在哪裏放這個，請寫完整的代碼 –

用JavaScript創建

回答

相關問題