Bir JS fonksiyonuna HTML kodu nasıl eklenir?

Question

Başka bir metinle .relatedactivities adlı bir sınıftaki metni değiştirmek için aşağıdaki jleri kullanıyorum. Aşağıdaki örnekte metin İlgili Etkinlikler'dir.

<script> 
$(document).ready(function(){ 
       $(".relatedactivities").text('Related Activities'); 
}) 
</script> 

Bunun yerine "İlgili Etkinlikler" metnini aşağıdaki HTML koduyla nasıl değiştirebilirim?

<h1 class="GreenLrg" align="center">Related Activities</h1> 
<div align="center"> <a href="/activities/kauai/ziplineadventures/koloa-zipline.htm"> 
<div class="CatBox"><img src="/Portals/0/1koloa-zipline-tour-2.jpg" height="174" width="231"><span>Koloa Zipline Tour</span></div> 
</a> <a href="/activities/kauai/ziplineadventures/zip-n-dip-expedition.htm">  
<div class="CatBox"><img src="/Portals/0/2zip-n-dip-2.jpg" height="174" width="231"><span>Zip N' Dip Expedition</span></div> 
</a> <a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm"> 
<div class="CatBox"><img src="/Portals/0/3kipu-zipline-safari-2.jpg" height="174" width="231"><span>Kipu Zipline Safari</span></div> 
<p></p> 
</a></div><a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm"> 

Answer 1

Ben JavaScript'inizin size sert kod HTML önermiyoruz kontrol edin.

Mükemmel bir dünyada, HTML döndüren AJAX aracılığıyla bir arka uç hizmeti arayabilir veya AngularJS veya React.JS gibi bir çerçeve veya kitaplık kullanabilirsiniz.

Şimdi, soruları yanıtlamak için, için .text()'u değiştirin.

Answer 2

Sen .text() yerine .html() kullanmanız gerekir:

$(".relatedactivities").html('<h1 class="GreenLrg" align="center">Related Activities</h1>...'); 

Answer 3

Kullanımı: html()

$(".relatedactivities").html('your code html'); 

gibi bu yöntem tarayıcının innerHTML özelliğini kullanır. Bazı tarayıcılar, orijinal bir belgede HTML kaynağını tam olarak kopyalayan HTML döndürmeyebilir. Örneğin, Internet Explorer bazen yalnızca alfanümerik karakterler içeriyorsa, öznitelik değerleri etrafındaki teklifleri bırakır. Bu konuda daha fazla bilgi için

, uzun vadede korumak için son derece zor hale gelecektir olarak http://api.jquery.com/html/