How to Put a List Inside a Span Tag

How to append a ul tag inside a P or span tag?

How to append a <ul> tag inside a <p> or <span>?

You can't, it's invalid. So what you're seeing is the browser trying to rearrange it to make it valid.

The content model of span elements (e.g., what they're allowed to have in them) is "phrasing content" (things like em and such). (Same for p elements.) ul elements are only valid where "flow content" (like paragraphs and divs) is expected.

To fix it, don't try to put a ul inside a span or a p. You could remove the span and the p and use a div, for instance:

$('body').append('<div><ul><li>test</li></ul></div>');

...or just use the ul directly without a wrapper around it.

---

Re your update:

If you add the following markup to an html document

...

And then open the page in your favorite browser, it will open correctly. Try it!

Sure — because the browser rearranges it. For instance, this snippet:

<p>  <span>    <ul>      <li>test</li>    </ul>  </span></p>

positioning a span within a li

Padding only affects block-level elements. You'll need to either change your span to be a block-level element or override the default display to be block or inline-block.

.price-features li span{
  display: block;
  padding-top:5px;
}

How to create a new li in html with span inside

Just create a new span and append it into your li

var span = document.createElement("span");
span.innerHTML = '×';
span.setAttribute("class", "w3-button w3-transparent w3-display-right");
span.onclick = function() { this.parentElement.style.display='none' };
li.appendChild(document.createTextNode(stringaFinestra));
li.appendChild(span);

Easier way to append a span tag to list element?

$('#list1').append('content');

See .append() documentation.

Styling the span in an unordered list

You can add following style

.cmsms_tabs_list li:nth-of-type(1) a span {
     color : red;
}

.cmsms_tabs_list li:nth-of-type(3) a span {
      color : blue;
}

.cmsms_tabs_list li:nth-of-type(4) a span {
      color : green;
}

.cmsms_tabs_list li:nth-of-type(2) a span {
      color : yellow;
}

For reference - http://jsfiddle.net/s1s12w2x/1/

Get value from span inside list with id

#top_cart_button.span will try to find the first element with class span that is a child of the element with id top_cart_button. You want to find the element with the tag span and not the class. To do so, remove the .. Then, to remove the extra character, you can extract only the numbers from the input using the extractDigits function below.

Here's a working example:

let InputText = $('#top_cart_button span').text();let InputDigitsOnly = extractDigits(InputText);
function extractDigits(input) {  return input.match(/\d+/g).map(Number);}
console.log(parseInt(InputDigitsOnly, 10));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><li id="top_cart_button">  <a href="default.asp?cmd=showCart" rel="nofollow">    <span>€ 55,00</span>  </a></li>

span word-wrap in list elements

Maybe the following might be what you need.

I added white-space: nowrap to the li elements to keep the inline child elements on one line.

You then need to add white-space: normal to the .message span to keep the break-word-wrapping the way you need it. Remember that white-space is inherited, so you need to reset it to normal for the inline span.

.messages {  list-style-type: none;  width: 100px;  border: 1px dotted blue;  margin: 0;  padding: 0;}.messages li {  white-space: nowrap;}.messages li .message {  white-space: normal;  word-wrap: break-word;  background-color: tan;}

<ul class="messages">  <li>    <span class="name">wILL</span>    <span class="message">sakdjfhskdjhfksjahflkjhldkjsakljfhalskdfhqweqweqeqeqweqweqweqweqweqwe</span>  </li></ul>

---

Related Topics