Avoid line break when using jquery append() or html()

Question

At first I have this in my DOM :

<li>
  <span>A</span>
</li>

When i do this :

$("li").append("<span>B</span>");

Here is what I got if I look into the DOM :

<li>
  <span>A</span>
  <span>B</span>
</li>

But I would like to have

<li>
   <span>A</span><span>B</span>
</li>

I need to display span on the same line in order to avoid displaying a white space between the two elements.

With javascript innerHTML the problem is the same as jQuery use it for append and html function.

Here is a jsFiddle

Thank you for your help

If you looked at the source code using firebug you would have seen it formatted as in your firs example. — darshanags
– darshanags, Commented Mar 20, 2013 at 1:49
It seems to work properly with .append as you have it: jsfiddle.net/ExplosionPIlls/LZy6L — Explosion Pills
– Explosion Pills, Commented Mar 20, 2013 at 1:50
There is no line-break, it's just the way your source-viewer formats it for readability. — ahren
– ahren, Commented Mar 20, 2013 at 1:50

David Thomas · Accepted Answer · 2017-03-01 15:38:05Z

You can solve, or at least avoid, the problem by simply using after() in place of append():

$("li span").last().after("<span>C</span>");

$("li span").last().after("<span>C</span>");
$('#generatedHTML').text($('li').html());

#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}
#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

Also, please note that I corrected your HTML: an li is only valid when a direct-child of a ul or ol (it should not be contained within any other element).

Also, you could use a somewhat more-complicated alternative:

$("li").append("<span>B</span>").contents().filter(function(){
    return this.nodeType === 3;
}).remove();

$("li").append("<span>B</span>").contents().filter(function(){
    return this.nodeType === 3;
}).remove();
$('#generatedHTML').text($('li').html());

#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}
#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

While it's been some time, I thought it was worth also adding a plain JavaScript version of the above:

let htmlToAppend = '<span>B</span>',
  span = document.querySelector('li span');

span.insertAdjacentHTML(
  'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;

let htmlToAppend = '<span>B</span>',
  span = document.querySelector('li span');

span.insertAdjacentHTML(
  'afterend', htmlToAppend
);
document.querySelector('#generatedHTML').textContent = span.parentNode.innerHTML;

#generatedHTML {
  white-space: pre-wrap;
  font-family: mono;
  padding: 0.5em;
  margin: 0;
  background-color: #eee;
}

#generatedHTML::before {
  content: "Created HTML: ";
  color: #999;
  display: block;
}

<ul>
  <li>
    <span>A</span>
  </li>
</ul>
<div id="generatedHTML"></div>

References:

JavaScript:
jQuery:
- after().
- append().
- contents().
- filter().
- last().
- remove().

You're very welcome indeed, and I'm glad to have been of help! =)
I like references :) And even if it looks a bit stranger than before it makes total sense and works like a charm.

Boris Zagoruiko · Accepted Answer · 2013-03-20 02:09:09Z

1

So, the answer is that there is no case what you're seeing in source code: the only line or several lines markup, they both implemented by browser as equal DOM. The white space problem can be caused by wrong styles. So, i recommend you to check them firstly.

answered Mar 20, 2013 at 2:09

Boris Zagoruiko

13.2k15 gold badges53 silver badges80 bronze badges

2 Comments

Nicolas Forney Over a year ago

I already checked the white space problem and found different solutions. The better one is to put spans on the same line. It seems there is no CSS solution which is cross-browser (without using hacks for certain browsers)

flu Over a year ago

This is not true. White-space between inline elements (and a line-break is counted as one) will lead to a white-space in the rendered HTML. There are some hacks around it but most of them need control of the HTML source so the questioner has a valid point.

Collectives™ on Stack Overflow

Avoid line break when using jquery append() or html()

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related