How to check overflow and combine it with if then function with Javascript / JQuery

Question

So I wanted to know how to check if a text of a div (child) in another div (parent) is overflowing (hidden). If it's true another div should be added at the bottom inside of the parent and style changes should be applied to the child.

I already found a JavaScript function to check the overflow in this question but since I am a complete beginner in JS I need some help to connect the specific tasks. Maybe screw up with the function, too. Please take a look at it =) I hope someone is willing to help me.

I tried to "form" the tasks with JQuery but I dont' know if they work like this:

$('.child').css({"margin":"+=10px";});

With this one I want to add 10px to the current margin.

$('.parent').append('<div class="child_2"></div}');

With this I want to add a div class at the bottom inside the parent.

HTML:

<div class="parent">
   <div class="child">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
  </div>
</div>

CSS

.parent{
    width:150px;
    height: 100px;
    float:left;
    background-color: red;
}

.child {
    max-height: 80px;
    margin:10px;
    background: green;
    overflow: hidden;
}

Javascript

function checkOverflow(child)
{
   var curOverflow = child.style.overflow;

   if ( !curOverflow || curOverflow === "hidden" )child.style.overflow = "visible";

   var isOverflowing = child.clientWidth < child.scrollWidth || child.clientHeight < child.scrollHeight;

   child.style.overflow = curOverflow;

   return isOverflowing;
}

Answer 1

$('.child').css({"margin":"+=10px";});

With this one I want to add 10px to the current margin.

This syntax is incorrect – the .css() method lets you set properties and values, but you can't compute them dynamically like that. If you want to add 10px to whatever the element's current margin is, you'd have to grab the current margin first and then add 10px to it:

$(document).ready(function(){
  var child = $(".child");
  
  // Get the current margin as an integer
  var margin = parseInt(child.css("margin").split("px")[0]);
    
  // Add 10
  margin = margin + 10;
   
  // Set the margin to the new value
  child.css({"margin": margin});
});

.child {
  outline: 1px solid red;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">Child</div>
</div>

---

$('.parent').append('<div class="child_2"></div}');

With this I want to add a div class at the bottom inside the parent.

This should work if you fix the typo (</div} should be </div>):

$(document).ready(function(){
  var parent = $(".parent");
  
  parent.append("<div class='child2'>child2</div>");
});

.parent {
  outline: 1px solid red;  
}
.child2 {
  outline: 1px solid blue;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">parent</div>