Impact append to page view

Question

Hello everyone, tell me please, why the append result is different from static html?

I used an example to illustrate: https://www.w3schools.com/code/tryit.asp?filename=FLSELJ1WJACU

$("#test_jq").append("<div class=\"test\"></div>"); $("#test_jq").append("<div class=\"test\"></div>"); $("#test_jq").append("<div class=\"test\"></div>"); $("#test_jq2").append("<div class=\"test\"></div>"); $("#test_jq2").append("<div class=\"test\"></div>"); $("#test_jq2").append("<div class=\"test\"></div>");

 .test { padding: 0; margin: 1px; position: relative; width: 100px; height: 120px; display: inline-block; background-color: pink; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>This is a Heading</h1> <h2>Test preview</h2> <div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> <div id="test_jq"></div> <h2>Test preview 2</h2> <div id="test_jq2"></div> <div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div>

Climenkomud climenkomud 1.817 one five 28 · Accepted Answer · 2017-11-23T15:27:34

Quite an interesting example. When you put a clean inline-block into a static layout - with tabs (or spaces, it doesn't matter) and line breaks - then you will see these spaces and line breaks. Try adding this css rule:

 div { font-size: 0; }

Just when you do elem.append(childElem) - you do not add hyphens and spaces, and everything works out as you would expect.

Igor Igor 78k five 20 48 · Answer 2 · 2017-11-23T15:26:14

Try this:

 <h2>Test preview</h2> <div><div class="test"></div><div class="test"></div><div class="test"></div></div> <div id="test_jq"></div>

In my opinion, everything is clear.

I do not understand why you were minus, really everything is clear!

Impact append to page view

2 answers 2

More articles: