jQuery .html() method (to replace element)

Question

Find element and add/change html of it

$('#area-outlook-link').html('<a href="http://google.com">Google</a>');

Answer 1

Click element, and change element with .html() method

$("button").click(function(){
    $("p").html("Hello <b>world</b>!");
});

Answer 2

Change #regTitle element wih .html() method for JS & jQuery

document.all.regTitle.innerHTML = 'Hello World';
$("#regTitle").html("Hello World");

Answer 3

<a id="search-listing" target="_blank" href="/map-search-property?&keyword=">
  <button class="button white">Search for listings</button>
</a>


<script>
    //jQuery
    var projectname = $('h1.page-header').text();
    var x = "/map-search-property?&keyword=";
    var y = projectname.substr(0, projectname.indexOf(','));
    var result = x + y;

    $('a#search-listing').attr('href', result);
</script>

Answer 4

Change content of element with other element

var header = $('h1.page-header'),
    forumQ = $('.field-type-text-with-summary > .field-items');

$(header).html(forumQ);

Answer 5

Replace .forum-category element with forumSubCat

var forumSubCat = $('ol.breadcrumb li:nth-child(3) a');
$('span.forum-category').html(forumSubCat);

Answer 6

var i1 = $('.category-icon-title.card-1'),
      i2 = $('.category-icon-title.card-2'),
      i3 = $('.category-icon-title.card-3'),
      iPlacement1 = $('li.col-md-4.with-icons:first-child #el-icon'),
      iPlacement2 = $('li.col-md-4.with-icons:nth-child(2) #el-icon'),
      iPlacement3 = $('li.col-md-4.with-icons:nth-child(3) #el-icon');

$(iPlacement1).html(i1);
$(iPlacement2).html(i2);
$(iPlacement3).html(i3);

 

Answer 7

(function($){
    $(document).ready(function(){
      $(".module.odd.p-t-30.p-b-40 .block-editors-pick:nth-child(2) .block-content .i-row .col-sm-6:nth-child(2)")
        .html('<div style="width: 300px;height: 250px;"><a href="/pullout"><img src="https://files.theedgeproperty.com.my/public/images/pullout1.png" style="width: 300px;height: 250px;"></a></div>');
    });
})(jQuery);