Having trouble placing new divs one in the other at the Wikipedia API project

[Dimitrios51]

Hello, here is my project link: https://codepen.io/dimitris51/pen/bMPjqd

After the visitor types something in the input form he gets the title, description and the link, as you can see in the JS console, and after that, I am saving those data in some variables which are meant to be displayed on the page, under the div with the class second
I save the title in the variable newDivForTitle and the description in the newDivForDescription variable which both use the createElement method to create their own div’s. I am trying to place to newDivForDescription div in the newDivForTitle div without success so far.

Here is my JS code, everything is in a for loop

$.getJSON(url, function(data) {
                  for (var i=0; i<data[1].length; i++) {
                        title = `${data[1][i]}`
                        description = `${data[2][i]}`
                        link = `${data[3][i]}`
                        console.log(title, description, link);
                        var newDivForTitle = document.createElement("div"); 
                        var newDivForDescription = document.createElement("div");
                        newDivForTitle.className = i+" parentDiv";
                        newDivForTitle.setAttribute("id",i)
                        newDivForDescription.className = "description";
                        document.getElementById("second").appendChild(newDivForTitle);
                        document.getElementById(i).appendChild(newDivForDescription);
                        $(newDivForTitle).html(title+'<br>');
                        $(newDivForDescription).html(description);
                  }
            });

[Randore]

I don’t know why you have written the code like this.

I suggest you either use pure Javascript (or) go with jquery.
And write clean code so that it’s easy to understand and easy to debug.

Problem: Not able to populate description right?

I have altered the code a little but still, it’s not perfect but it gives an idea to you.

function getJson() {
  $.getJSON(url, function(data) {
    for (var i = 0; i < data[1].length; i++) {
      title = `${data[1][i]}`
      description = `${data[2][i]}`
      link = `${data[3][i]}`
      console.log(title, description, link);
      // Create HTML elements.
      let titleDiv = createElem('div'),
        descriptionDiv = createElem('div'),
        parentDiv = createElem('div'),
        anchor = createElem('a'),
        br = createElem('br');

      // set Attributes
      $(parentDiv).addClass('parent');
      $(titleDiv).addClass('title');
      $(descriptionDiv).addClass('description');
      $(anchor).addClass('link');

      // Update data
      titleDiv.append(title);
      anchor.append(link);
      descriptionDiv.append(description, br, anchor);
      parentDiv.append(titleDiv, descriptionDiv);

      // Add all to parent Div
      $('#second').append(parentDiv);
    }
  });
}

[Randore]

https://jsfiddle.net/Randore/2ckxe0ca/1/

[Dimitrios51]

Hey Randore, thanks for the reply and the help! I had to change some things however really quick, because they didn’t work(the createElem to document.createElement) As I see in the inspect elements window, it’s about the same as I wanted it to be! So now the only thing that remains to finish it is to give it some style and place it in a specific place on my page and delete the previous data when searching for a new term!

But, I have a question, why you say that my code isn’t readable? I can understand it for someone to be hard to read someone’s else’s code, but why at such a point? Why you say “why you have written the code like this” ?
Once again thanks!

[Randore]

@Dimitrios51

didn’t work(the createElem to document.createElement) As I see in the inspect elements window

Hey, I didn’t post the function call for that createElem
If you check the link which I have shared above there you can find the function for createElem.

But, I have a question, why you say that my code isn’t readable? I can understand it for someone to be hard to read someone’s else’s code, but why at such a point? Why you say “why you have written the code like this” ?
Once again thanks!

As I mentioned previously, don’t mix things! - where you can use one library you have written it in JS and used jquery.

I am not saying - not to use JS inside jQuery or vice-versa. Here my point is within small bits of code you mixed both that is not good.

From your code

var onKeyDown = document.getElementById("input");
var onClick = document.getElementById("onclick");

onClick.onclick=userInput;
onKeyDown.onkeydown=search;

You have written onClick.onclick and onKeyDown.onkeydown - imagine you have to work on a big function with so much of data and handle events, then imagine the frustration that you or some other developer will face.

I would write the same code like this.

let searchInput = document.getElementById('input');

Don’t write the ID same as html element, so instead of that write
<input type="search" id="search-field" />

And instead of onClick.onclick. write

$(‘#search-field’).on(‘click’, (){ });
or
document.getElementById(“search-field”).addEventListener(‘click’, callback);

And another way to populate data is

let x = <div class=‘parentDiv’>
<div>${title}</div><div>${description}</div><a>link</a></div>`

And finally, append this to the root div isn’t it make sense to optimize the code and comment only where it’s necessary!

This is where DesignPatterns comes into play - I am also learning.
Just my 2 Cents.