Can the use of visibility: hidden; be a substitute for adding a new element? Instead of adding, simply change to visibility: visible;
.one{
background-color: gray;
}
.two{
visibility: hidden;
padding: 20px;
}
https://jsfiddle.net/Hastig/bx2kwjmw/
Alternatively, can padding be added to the parent element instead...
.one{
background-color: gray;
padding: 20px;
}
.two{
}
https://jsfiddle.net/Hastig/bx2kwjmw/1/
Edit, upon further experimentation, it was observed that adding padding to the parent div is not a viable solution as the height still increases when text is inserted due to the size of the text.
A new fiddle has been created to demonstrate placing invisible ghost text as a placeholder for sizing and then removing it when content is appended with a plugin.
This is just one approach, there are likely many other ways to achieve this..
https://jsfiddle.net/Hastig/bx2kwjmw/5/
$('.plugin-append-simulator').click(function() {
var content = '<div class="two">something</div>';
$('.one').html('').append(content);
});
// $('.one') | selects .one
// .html('') | removes ghost text
// .append(content) | appends your content
.one {
background-color: gray;
padding: 20px;
color: hsla(0, 0%, 0%, 0);
}
.two {
color: hsla(0, 0%, 0%, 1);
}
/* scaffolding. ignore this */.plugin-append-simulator { position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);display: inline-flex;padding: 3px 8px 1px 8px;color: white;background-color: black;cursor: pointer;
}.plugin-append-simulator:hover { background-color: red; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="one">ghost text</div>
<!-- ignore, scaffolding -->
<div class="plugin-append-simulator">simulate plugin append</div>
Previous version that toggles padding from parent to child..
https://jsfiddle.net/Hastig/bx2kwjmw/6/