Skip to content
Fix Code Error

How to add a list item to an existing unordered list?

March 13, 2021 by Code Error
Posted By: Anonymous

I have code that looks like this:

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

I’d like to use jQuery to add the following to the list:

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

I tried this:

$("#content ul li:last").append("<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>");

But that adds the new li inside the last li (just before the closing tag), not after it. What’s the best way to add this li?

Solution

This would do it:

$("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');

Two things:

  • You can just append the <li> to the <ul> itself.
  • You need to use the opposite type of quotes than what you’re using in your HTML. So since you’re using double quotes in your attributes, surround the code with single quotes.
Answered By: Anonymous

Related Articles

  • Combining items using XSLT Transform
  • Reference - What does this regex mean?
  • Active tab issue on page load HTML
  • Stacked Tabs in Bootstrap 3
  • Is CSS Turing complete?
  • After a little scroll, the sticky navbar just is not…
  • How can I make this v-tabs Vuetify.js component work?
  • vue js cant understand keep alive
  • When tab is selected, show next tab.. if last tab…
  • Vue rendering order
  • Pandas pivot_table: filter on aggregate function
  • Display Grid does not work in Polymer correctly
  • How to add 'load more' functionality to items on a…
  • GLYPHICONS - bootstrap icon font hex value
  • Centering in CSS Grid
  • Dynamic tabs with user-click chosen components
  • Vuejs: Using keep-alive (Or something similar) on a slot
  • Vuetify v-tabs v-tab-item overflows window width
  • How to show title in hover - css / jquery
  • Vaadin: Tabs are displayed in a really bizarre way -…
  • Convert array to nested JSON object - Angular Material tree
  • Fix top buttons on scroll of list below
  • nesting elements and dynamic content inside…
  • Vaadin Designer Tabs not correctly adding children…
  • How to prevent scrolling the whole page?
  • Polymer 1.0 paper-tabs addEventListener stops…
  • How to specify line breaks in a multi-line flexbox layout?
  • How to make my custom tab component work with…
  • center 3 items on 2 lines
  • render function or template not defined in…
  • reload the route emberjs
  • Using jQuery Tabs with Marionette Layouts
  • vue.js: loop + component + if/else?
  • Twitter Bootstrap tabs not working: when I click on…
  • Polymer 2.0 menu tabs with content
  • Is it possible to apply CSS to half of a character?
  • Styling paper-tab content
  • Polymer2.0 - dom-repeat is not working inside paper-tabs
  • Polymer: Binding paper-tabs to core-pages inside…
  • How to use html template with vue.js
  • How to use Vuetify tabs with vue-router
  • Android REST client, Sample?
  • Navbar not filling width of page when reduced to mobile view
  • How to use Vuetify tabs with vue-router via router name
  • Dart core element core-collapse
  • Change which paper-tabs displayed on-click data…
  • Using querySelector to find nested elements inside a…
  • does not work with ?
  • In CSS Flexbox, why are there no "justify-items" and…
  • How to separate opening and closing tag by…
  • bootstrap-vue tabs - open a tab content given an…
  • Aurelia route matching
  • How do I upload FIle in Vuejs and Expressjs
  • Polymer focus() has to be wrapped in setTimeout() to work?
  • jQuery Mobile: document ready vs. page events
  • Can't seem to cleanup detached DOM elements
  • Setting up a controller property after the model hook
  • "Thinking in AngularJS" if I have a jQuery background?
  • Why my "title" bloc doesn't go to bottom?
  • jQuery - trapping tab select event
  • VueJS masonry layout
  • Use Paper-tabs in combination with Neon animated Pages
  • integrating disqus with emberjs only works on first…
  • Dart / Polygon - Using Paper tabs in a core-toolbar
  • Vuetify - tabs with vue components
  • Cannot make table responsive
  • app-theme.html not working in custom element
  • Downloading jQuery UI CSS from Google's CDN
  • Trying to keep dropdown menus flush to the edge of…
  • Trigger code on component v-show=true
  • Dynamically loading/changing Vuetify Tabs
  • How to make vuetify navigation drawer to close group…
  • EmberJS - how to access parent controller from…
  • “tag already exists in the remote" error after…
  • Latest jQuery version on Google's CDN
  • Onclick event not happening when slick slider is…
  • Reference — What does this symbol mean in PHP?
  • jQuery preventDefault() not triggered
  • Relative links and backbone.js router
  • Vertical Align Center in Bootstrap 4
  • React router link is not re-rendering component
  • loop and eliminate unwanted lines with beautiful soup
  • Creating tab header for tabs web component using…
  • Bootstrap 3: Keep selected tab on page refresh
  • How to use Servlets and Ajax?
  • Binding Paper-Tabs to Core-Pages with Polymer
  • Could not find asset using Polymer.Dart
  • show all tags in git log
  • PolymerJS not working on android 4.2.1 and 4.1.2
  • React Router Dom hitting wrong endpoint
  • How to use JQuery UI components in Aurelia getting…
  • How to open specific tab of bootstrap nav tabs on…
  • How to change the properties of a custom element in…
  • Examples of GoF Design Patterns in Java's core libraries
  • How to get partial information from JSON data in Python?
  • Dynamic Tabs/Lists with Ember js
  • Rendering tabs (jquery ui) with Backbone.js &…
  • Daisy is overlapping the other contents of the div
  • Sort table rows In Bootstrap
  • Smart way to truncate long strings

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

What’s the difference between a method and a function?

Next Post:

Validation failed for one or more entities. See ‘EntityValidationErrors’ property for more details

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error