How to append Span with in label with in li using Java Script

Question

I am working to create a tags with in some tags using java script(or JQuery). Below is the final output i would like to get and append some value and id in to that format.

<li class=" " >
  <label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover">
   <input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox"   
      value="100" title="Input Tags" checked="checked">
   <span>Input Tags</span>
  </label>
</li>

How can i achieve this. As i know i can generate the tags using var dateSpan = document.createElement('span'); var listTag = document.createElement('li'); but unable to achieve the whole html format li tag. Your suggestions are more valuable. Thanks in advance.

you can use: var html = 'HTML_HERE' and use jquery append method. — Abdul Rafay
– Abdul Rafay, Commented Mar 9, 2017 at 4:20

Himanshu Tanwar · Accepted Answer · 2017-03-09 04:24:31Z

1

I have used jQuery here to achieve the output. You can modify the attributes and text as per your requirement.

HTML

<li class=" " >
  <label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover">
   <input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox"   
      value="100" title="Input Tags" checked="checked">
   <span>Input Tags</span>
  </label>
</li>

<li class='list2'>

</li>

JS

var label = $("<label>fsfsdfsdf</label");
var span = $("<span>Input Tags</span>");
var input = $('<input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox" value="100" title="Input Tags" checked="checked">');
$(".list2").append(label.append(input).append(span));

https://jsfiddle.net/6hdew40d/

answered Mar 9, 2017 at 4:24

Himanshu Tanwar

9266 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

4b0 · Accepted Answer · 2017-03-09 04:24:06Z

0

You can generate markup and append to desire UL id.

var html = '';
html += '<li class=" " >';
html += '<label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover">';
html += '<input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox"value = "100" title = "Input Tags" checked="checked">';
html += '<span>Input Tags</span>';
html += '</label> </li>';
$('#appendtoUl').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='appendtoUl'>

</ul>

answered Mar 9, 2017 at 4:24

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Comments

Wais Kamal · Accepted Answer · 2017-03-09 04:27:47Z

Here is what you are looking for:

var myList = document.createElement("li");
myList.className = " ";
var myLabel = document.createElement("label");
myLabel.for = "SearchFr-option-0";
myLabel.title = "";
myLabel.className = "ui-lert ui-state-hover";
var myInput = document.createElement("input");
myInput.id = "ui-multi-Filter-option-0";
myInput.name = "multiselect_measureFilter";
myInput.type = "checkbox";
myInput.value = "100";
myInput.title = "Input Tags";
myInput.checked = "checked";
var mySpan = document.createElement("span");
var myTextNode = document.createTextNode("Input Tags");
mySpan.appendChild(myTextNode);
myList.appendChild(myLabel);
myList.appendChild(myInput);
myList.appendChild(mySpan);

<li class=" " >
  <label for="SearchFr-option-0" title="" class="ui-lert ui-state-hover">
   <input id="ui-multi-Filter-option-0" name="multiselect_measureFilter" type="checkbox"   
      value="100" title="Input Tags" checked="checked">
   <span>Input Tags</span>
  </label>
</li>

Collectives™ on Stack Overflow

How to append Span with in label with in li using Java Script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related