Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 247
Nicolas Forney Avatar asked Mar 20 '13 01:03

Nicolas Forney


People also ask

How do I stop a line breaking in HTML?

<nobr>: The Non-Breaking Text element Be aware that this feature may cease to work at any time. The <nobr> HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.

Does HTML care about line breaks?

You can insert line breaks in HTML with the <br> tag, which is equivalent to a carriage return on a keyboard. Be aware that HTML will ignore any line break from a keyboard's return key. If you are wondering why there's a forward slash in the <br> tag above, the slash was important when HTML4 was still widely used.

What is Oneline break?

To add single line break, key Shift and Enter at the same time on your keyboard. The Shift+Enter combo places the <br /> HTML tag indicating a single line break. A single line break may be used when composing poetry, lists, and recipes.

How do you break a line through a string in HTML?

<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return).


2 Answers

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:
    • document.querySelector().
    • Element.innerHTML.
    • Element.insertAdjacentHTML().
    • let statement.
    • Node.nodeType.
    • Node.textContent.
  • jQuery:
    • after().
    • append().
    • contents().
    • filter().
    • last().
    • remove().
like image 187
David Thomas Avatar answered Sep 23 '22 20:09

David Thomas


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.

like image 35
Glen Swift Avatar answered Sep 25 '22 20:09

Glen Swift