Sorting javaScript created divs

Question

Hay I have a problem with sorting divs from createElement function.

Problem: I create divs from database-items which are align in row (latest item on the end)

What I want: Display the Items in reversed direction. The latest item added to the database should appear as first item in the stream (like a newsstream on facebook).

Question: How can I change just the direction the divs are loaded/created?

Further I thought about a technique to set an individual ID to each div created, for sorting them later by ID (Id could be ongoing numbers). I found this one but it don´t works while i does not increment the ID-number: Javascript create divs with different ids

I know there are many Questions like this on stackoverflow, and I tried several before, with no success for my issue.

Check out my Code:

//create firebase reference
var dbRef = new Firebase("….com/");
var contactsRef = dbRef.child('contacts')

//load all contacts
contactsRef.on("child_added", function(snap) {
//console.log(snap.val())
  snap.forEach(function(childSnapshot) {
      var key = childSnapshot.key();
      var childData = childSnapshot.val();


      var divCount = 0;

  //create divs from database-elements
  var card = document.createElement('div');
  card.id = 'div'+divCount;
  card.setAttribute('class', 'linkprev');
  document.body.appendChild(card);

  var cardtitle = document.createElement('div');
  cardtitle.setAttribute('class', 'cardtitle');
  cardtitle.innerHTML = childData;
  card.appendChild(cardtitle);
  document.guteUrls.execute();

  divCount++;
  

 console.log(event);

 //linkify plugin to convert div-elements (strings) to hyperlinks
 $('div').linkify();
 $('#sidebar').linkify({
     target: "_blank"
 }); 

});
});


//save contact
document.querySelector(".addValue").addEventListener("click", function( event ) {  
  event.preventDefault();
  if( document.querySelector('#url').value != '' && document.querySelector('#url').value.charAt(0) == "h" && document.querySelector('#url').value.charAt(3) == "p"){
    contactsRef.push({
        name: document.querySelector('#url').value,})
      contactForm.reset();} 
  else {
    alert('Oops, seems like an error…');
  }
}, false);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>frontendpublishing-test</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
    <link href="css/flexboxgrid.min.css" rel="stylesheet">
    
  <style type="text/css">
    #contacts p, 
    #contacts p.lead{
      margin: 0;
    }
  </style>

</head>
<body>
  <div class="container">
    <h1>Titel h1</h1>
    <hr/>
    <div class="row">
      <div class="col-md-6">
        <form method="post" name="contactForm">
          <div class="form-group">               
            <input id="url" type="url" required name="url" placeholder="share a good article/blog/topic" class="input">
            <button type="submit" class="btn btn-primary addValue">Submit</button>
          </form>
        

<!--  <script>
    $document.ready(function){
      document.getElementsByClassName('linkified');
      {console.log("linkified")};

    };
          </script>
-->

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <!-- Latest compiled and minified Bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <!-- Include Firebase Library -->
  <script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
  <!-- Contacts Store JavaScript -->
  <script src="script.js"></script>

  <script src="linkify.min.js"></script>

  <script src="linkify-jquery.min.js"></script>
  
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  

  <script async src="https://guteurls.de/guteurls.js"
  
  selector='.linkprev'
  gif="http://loading.io/assets/img/default-loader.gif"
  callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
  callback="(function($){console.log('finished')})"
  init="(function($){console.log('JS will start to search URLs now')})"
  ></script>

</body>
</html>

Thanks for helping :)

Entitled question with too simple answer: Because I don´t know how to do. I hope that there is a simple way using jquery/javaScript. I will have a look how it could work with SQL. Thanks so far — bengraf
– bengraf, Commented Sep 5, 2017 at 12:13

jidexl21 · Accepted Answer · 2017-09-05 12:14:09Z

0

since you are using jquery instead of

document.body.appendChild(card);

use

$('body').prepend($(card))

you can mark up the area with an id you want to add them into so that it does not insert into the top of your document like

$('#elementid').prepend($(card))

answered Sep 5, 2017 at 12:14

jidexl21

6198 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bengraf Over a year ago

Great and easy! Thanks

bluehipy · Accepted Answer · 2017-09-05 12:13:56Z

0

1.Why not query them descendent from db? :))

2.

card.childNodes.length  
    ? card.insertBefore(cardtitle, card.childNodes[0])
    : card.appenChild(cardtitle);

answered Sep 5, 2017 at 12:13

bluehipy

2,2941 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Sorting javaScript created divs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related