CODEWITHSUNDEEP
jqueryhtmlfileappend
mfaorlkzus
mfaorlkzus

Reputation: 159

Appending HTML-Data from another file to a div

I want to append HTML-Blocks into my website from an external file. The file is on my server and contains a blueprint for a list entry. When the user searches something, the results should be appended with a loop and displayed with the code from the external HTML file.

Here is the structure of my page:

The main page

<div id="content">
  // Display List elements here
<div>

My JQuery code

$.('#search-btn').click(function(){
  getElements();
});

function getElements(){
  // Getting elements from server and saving the in the variable data
  for(var i = 0; i < data.length; i++){
    // Append the Elements to the div with id="content"
  }
}

Blueprint for an element, diffrent HTML file

<div class="element">
  <p class="show_name"></p>
  <p class="show_email"></p>
  <p class="show_birthday"></p>
</div>

So, I need to append multiple blueprints to the content-div of the main page. Any ideas on how to implement this using JQuery? :)

Upvotes: 2

Views: 7625

Answers (3)

Dinesh Gaddi
Dinesh Gaddi

Reputation: 1

Create a main div with class name 'main', and you can use this code:

function getElements() {
    for(var i = 0; i < data.length; i++){
        $(".main").append("<div class='content'><div class='show_name'>"+data.value1+"</div><div class='show_email'>"+data.value2+"</div><div class='show_birthday'>"+data.value3+"</div></div>");
    }
}

Upvotes: 0

Atul Kamani
Atul Kamani

Reputation: 105

Try below:

function getElements1(){
  var data = ['a', 'b', 'c'];
  // Getting elements from server and saving the in the variable data
  for(var i = 0; i < data.length; i++){
    // Append the Elements to the div with id="content"
    $('#content').append(data[i]);
  }
}
$('#search-btn').click(function(){
  getElements1();
});

See the working code: https://jsfiddle.net/9p77afc3/12/

Upvotes: 0

MysterX
MysterX

Reputation: 2378

Try this solution

function getElements(){
  var div = $('#content');
  // Getting elements from server and saving the in the variable data
  $.get( "/url/to/file.html", function(response) {
    for(var i = 0; i < data.length; i++){
      div.append($(response));
    }

  });
}

Upvotes: 6

Related Questions