CODEWITHSUNDEEP
jqueryhtmlappendline-breaks
Nicolas Forney
Nicolas Forney

Reputation: 888

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

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

Upvotes: 8

Views: 12963

Answers (2)

David Thomas
David Thomas

Reputation: 253506

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:

Upvotes: 11

Boris Zagoruiko
Boris Zagoruiko

Reputation: 13174

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.

Upvotes: 1

Related Questions